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

爱玉

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

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>

这是一个演示

乔·恩斯明格

是一个工作的小提琴

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>'
    }
});

没有$ watch的版本

带有ng-repeat的版本

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

角$ scope变量未在控制器中更新

来自分类Dev

AngularJS-在访问DOM的自定义指令中设置控制器的$ scope变量

来自分类Dev

在指令/控制器中绑定$ scope

来自分类Dev

在指令/控制器中绑定$ scope

来自分类Dev

如何在指令模板中使用控制器$ scope

来自分类Dev

从指令更改控制器$ scope

来自分类Dev

AngularJS访问控制器$ scope从外部

来自分类Dev

从指令中获取值到控制器中的$ scope

来自分类Dev

在SpringMVC控制器层中,@Scope(“ prototype”)与@Scope(“ singleton”)

来自分类Dev

为什么我无法在指令控制器中访问$ scope.map?

来自分类Dev

如何在指令链接中访问angular $ scope控制器?

来自分类Dev

无法从Angular JS的控制器函数中访问$ scope变量

来自分类Dev

从同一控制器Angularjs中的另一个方法访问$ scope变量

来自分类Dev

在AngularJS中的不同控制器中访问$ scope

来自分类Dev

如何使用angularjs将$ scope变量从控制器传递到指令

来自分类Dev

将Controller的$ scope变量传递给嵌套指令的控制器

来自分类Dev

单击绑定指令以更新控制器$ scope后,是否需要调用Angular的$ apply?

来自分类Dev

如何在AngularJS中与另一个控制器共享$ scope变量?

来自分类Dev

AngularJS如何在2个或更多控制器中解析对$ scope变量的调用?

来自分类Dev

Angular控制器中的函数未将数据返回到$ scope变量

来自分类Dev

Angular控制器中的函数未将数据返回到$ scope变量

来自分类Dev

如何从Angularjs中的控制器向$ scope.master对象添加一些变量

来自分类Dev

AngularJS初始化指令/控制器的$ scope

来自分类Dev

在AngularJS控制器和指令中使用“ this”而不是“ scope”

来自分类Dev

如何从内部指令更改控制器的 $scope 属性?

来自分类Dev

$ scope.myVariable未在控制器中更新为Angular-ui引导模态

来自分类Dev

$ scope值未在其他控制器中更新

来自分类Dev

路由更改后,控制器div中的$ scope未更新

来自分类Dev

$ scope.myVariable在angular-ui引导模态的控制器中未更新

Related 相关文章

  1. 1

    角$ scope变量未在控制器中更新

  2. 2

    AngularJS-在访问DOM的自定义指令中设置控制器的$ scope变量

  3. 3

    在指令/控制器中绑定$ scope

  4. 4

    在指令/控制器中绑定$ scope

  5. 5

    如何在指令模板中使用控制器$ scope

  6. 6

    从指令更改控制器$ scope

  7. 7

    AngularJS访问控制器$ scope从外部

  8. 8

    从指令中获取值到控制器中的$ scope

  9. 9

    在SpringMVC控制器层中,@Scope(“ prototype”)与@Scope(“ singleton”)

  10. 10

    为什么我无法在指令控制器中访问$ scope.map?

  11. 11

    如何在指令链接中访问angular $ scope控制器?

  12. 12

    无法从Angular JS的控制器函数中访问$ scope变量

  13. 13

    从同一控制器Angularjs中的另一个方法访问$ scope变量

  14. 14

    在AngularJS中的不同控制器中访问$ scope

  15. 15

    如何使用angularjs将$ scope变量从控制器传递到指令

  16. 16

    将Controller的$ scope变量传递给嵌套指令的控制器

  17. 17

    单击绑定指令以更新控制器$ scope后,是否需要调用Angular的$ apply?

  18. 18

    如何在AngularJS中与另一个控制器共享$ scope变量?

  19. 19

    AngularJS如何在2个或更多控制器中解析对$ scope变量的调用?

  20. 20

    Angular控制器中的函数未将数据返回到$ scope变量

  21. 21

    Angular控制器中的函数未将数据返回到$ scope变量

  22. 22

    如何从Angularjs中的控制器向$ scope.master对象添加一些变量

  23. 23

    AngularJS初始化指令/控制器的$ scope

  24. 24

    在AngularJS控制器和指令中使用“ this”而不是“ scope”

  25. 25

    如何从内部指令更改控制器的 $scope 属性?

  26. 26

    $ scope.myVariable未在控制器中更新为Angular-ui引导模态

  27. 27

    $ scope值未在其他控制器中更新

  28. 28

    路由更改后,控制器div中的$ scope未更新

  29. 29

    $ scope.myVariable在angular-ui引导模态的控制器中未更新

热门标签

归档