我创建了一个带有input元素和span的简单指令.使用该指令,我创建了两个带隔离范围的自定义元素.现在,我试图获得在指令的input元素中输入的数据的总和.但真的无法弄清楚如何做到这一点.
这是我的控制器和指令：
这是我的控制器和指令：
angular.module('mapp',[])
.controller('ctrl',['$scope',function($scope){
$scope.total = 0;
}])
.directive('customElement',function(){
return {
restrict: 'E',scope:{
data: '=info'
},template: '<input type="text" ng-model="data1">\
<span>{{data1}}</span>'
}
});
我想总结所有指令元素的data1并更新$scope.total.这是HTML代码：
<div ng-app="mapp">
<div ng-controller="ctrl">
<custom-element info="a"></custom-element>
<custom-element info="b"></custom-element>
<br/>
<br/> Total: <span>{{total}}</span>
</div>
</div>
这是一个DEMO
Here是一个工作小提琴
angular.module('mapp',[])
.controller('ctrl',function ($scope) {
$scope.total = 0;
$scope.a = 0;
$scope.b = 0;
$scope.$watchCollection('[a,b]',function () {
console.log('watch');
$scope.total = $scope.a + $scope.b;
});
}])
.directive('customElement',function () {
return {
restrict: 'E',scope: {
data: '=info'
},template: '<input type="number" ng-model="data">\
<span>{{data}}</span>'
}
});
