通控制变量纳克级和NG-模型templateUrl指令

我试图创建使用UI引导一个简单的通断开关自定义元素中，这里有一个例子：通控制变量纳克级和NG-模型templateUrl指令

<div class="btn-group" name="buttonName"> 
      <label ng-class="{'btn btn-default': !onOrOff, 'btn btn-primary': onOrOff}" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label> 
      <label ng-class="{'btn btn-default': onOrOff, 'btn btn-warning': !onOrOff}" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label> 
</div>

我会喜欢做的就是能够跟踪ng-model的onOrOff状态，并通过插值设置初始状态，但对于ng类似乎并不好。理想情况下，我希望能够在我的代码中使用类似以下内容：

<onoff-switch name="buttonName" onOrOff="{{myController.initialValue}}"></onoff-switch>

我该如何去做这件事？我对角度相当陌生，所以请原谅我，如果我的方法有任何明显的缺陷。

来源

2015-10-21 Devon E

尝试删除插值（{{} }）围绕你的初始值？ – Icycool

它应该是'on-or-off =“{{myController.initialValue}}”' –

谢谢你，这两个建议的结合对我们有很大帮助！ –

为您的示例尝试一个指令（仅举例）。

angular.module('yourAppNam', []).directive('onoffSwitch', function(){ 
    return { 
     scope: { 
      name: '=', 
      onOrOff: '=' 
     }, 
     template: '<div class="btn-group" name="{{name}}"> 
      <label ng-class="{'btn btn-default': !onOrOff, 'btn btn-primary': onOrOff}" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label> 
      <label ng-class="{'btn btn-default': onOrOff, 'btn btn-warning': !onOrOff}" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label> 
</div>', 
     restrict: 'E' 
    }; 
})

来源

2015-10-21 18:24:06

是的我试图以这种方式使用指令，但我应该如何构造它？现在，当页面显示时，这两个变量都没有正确评估，这与ng-class内部的插值有关，需要解决。 –

解决了这个问题，这里要说的是似乎是工作的解决方案：

控制器：

var app = angular.module('app', ['ui.bootstrap']); 

app.directive('onoffSwitch', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      name: '=', 
      onOrOff: '=' 
     }, 
     template: '<div class="btn-group" name="{{name}}"><label ng-class="{\'btn btn-default\': !onOrOff, \'btn btn-warning\': onOrOff }" ng-model="onOrOff" uib-btn-radio="true" uncheckable>Yes</label><label ng-class="{\'btn btn-default\': onOrOff, \'btn btn-primary\': !onOrOff }" ng-model="onOrOff" uib-btn-radio="false" uncheckable>No</label></div>', 

    }; 
});

元素：

<onoff-switch name="buttonName" on-or-off="myController.initialValue"></onoff-switch>

来源

2015-10-21 19:05:01

通控制变量纳克级和NG-模型templateUrl指令

回答

相关问题