angularjs – 在指令模板中访问$scope变量并更新控制器$scope.va

发布时间：2020-12-17 07:31:25 所属栏目：安全来源：网络整理

导读：我创建了一个带有input元素和span的简单指令.使用该指令,我创建了两个带隔离范围的自定义元素.现在,我试图获得在指令的input元素中输入的数据的总和.但真的无法弄清楚如何做到这一点. 这是我的控制器和指令： angular.module('mapp',[]).controller('ctrl',[

我创建了一个带有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>'
    }
});

A version without $watch

A version with ng-repeat

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!