我制作了一个小的角度模块来与引导程序“按钮组”(加上一些 javascript 以使它们像单选按钮一样工作。我在这个模块上做了同样的复选框:http://jsfiddle .net/evaneus/z9rge/
我的代码在http://jsfiddle.net/askbjoernhansen/YjMMD/
我的问题:
1)这是正确的方法吗?
2) 模型会被观看 3 次,还是 $scope.$watch() 会发现它是同一个模型而只观看一次?好像是这样的。
3) 像我一样在 $watch 函数中处理 DOM 是否“正确”?感觉“脏”,但我想这就是我在将 angular 添加到与 angularjs 本身不兼容的东西时所要求的。或者?
4)有没有办法将 ng-model 属性放在 btn-group 而不是每个按钮上?那会让它看起来更干净。
你可以在我上面的jsfiddle看到它,或者代码在这里,首先是html:
<!-- to test the two-way model -->
<input name="test" type="radio" ng-model="myModel['A']" value="left"> Left<br>
<input name="test" type="radio" ng-model="myModel['A']" value="middle"> Middle<br>
<input name="test" type="radio" ng-model="myModel['A']" value="right"> Right<br>
myModel A {{myModel['A']}}<br/>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" buttons-radio=""
ng-model="myModel['A']" value="left" class="btn">Left</button>
<button type="button" buttons-radio=""
ng-model="myModel['A']" value="middle" class="btn">Middle</button>
<button type="button" buttons-radio=""
ng-model="myModel['A']" value="right" class="btn">Right</button>
</div>
和javascript:
angular.module('buttonsRadio', []).directive('buttonsRadio', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, element, attr, ctrl) {
element.bind('click', function() {
$scope.$apply(function(scope) {
ctrl.$setViewValue(attr.value);
});
});
// This should just be added once, but is added for each radio input now?
$scope.$watch(attr.ngModel, function(newValue, oldValue) {
element.parent(".btn-group").find('button').removeClass("active");
element.parent(".btn-group")
.find("button[value='" + newValue + "']").addClass('active');
});
}
};
});