访问指令模板中的 $scope 变量并更新控制器 $scope.variable

Question

我创建了一个带有输入元素和跨度的简单指令。使用该指令，我创建了两个具有隔离范围的自定义元素。现在，我正在尝试获取在指令的输入元素中输入的数据总和。但真的不知道该怎么做。这是我的控制器和指令：

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

Answer 1

Here 是有效的 fiddle

angular.module('mapp', [])

    .controller('ctrl', ['$scope', 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>'
    }
});

A version without $watch

A version with ng-repeat

Answer 2

这是你可以用 $watch 做的

控制器

.controller('ctrl',['$scope',function($scope){
    $scope.test = {};
    $scope.test.a = 0;
    $scope.test.b = 0;
    $scope.$watch('test',function(newVal,oldVal){
        $scope.total = $scope.test.a + $scope.test.b
    },true)
    $scope.total = 0;
}])

指令将 ng-model="data1" 更改为 ng-model="data"

template: '<input type="number" ng-model="data">\
                    <span>{{data}}</span>'

Working Fiddle

Answer 3

Total: <span>{{a+b}}</span> 这也适用于 html，无需使用 $watch 或来自控制器

的功能

访问指令模板中的 $scope 变量并更新控制器 $scope.variable

Access $scope variable inside directive template and update controller $scope.variable

angularjs

angularjs-directive

angularjs-scope