Javascript AngularJS：通过服务更新将指令绑定到控制器_Javascript_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Service

Javascript AngularJS：通过服务更新将指令绑定到控制器

javascript angularjs

Javascript AngularJS：通过服务更新将指令绑定到控制器,javascript,angularjs,angularjs-directive,angularjs-scope,angularjs-service,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Service,如何通过服务更新将指令绑定到控制器我想通过指令（添加到购物车按钮）创建更新购物车（服务）的可能性，然后控制器（显示购物车）将更新其视图。尽管我在服务本身上添加了一块手表，但我的控制器没有更新当然，如果控制器和指令不共享相同的作用域（transclude:true，在指令中）就好了服务： angular.module('stamModule', []) .factory('valueService', function () { var factory = {

如何通过服务更新将指令绑定到控制器

我想通过指令（添加到购物车按钮）创建更新购物车（服务）的可能性，然后控制器（显示购物车）将更新其视图。尽管我在服务本身上添加了一块手表，但我的控制器没有更新

当然，如果控制器和指令不共享相同的作用域（transclude:true，在指令中）就好了

服务：

    angular.module('stamModule', [])
    .factory('valueService', function () {
    var factory = {
        data: {value: 1000},
        inc: inc,
        getData: getData
    };

    function inc() {
        this.data.value++;
    }

    function getData() {
        return this.data;
    }

    return factory;
})

该指令：

 .directive('buttonDirective', function (valueService) {

    var directive = {
        restrict: 'E',
        template: '<button>Inc</button>',
        link: linkFnc
    };

    function linkFnc(scope, el) {
        el.on('click', function () {
            valueService.inc();
        });
    }

    return directive;
})

html：

<body ng-app="stamModule">
<hr>
<div ng-controller="FirstController as vm">
    <p>{{vm.serv.data}}</p>
    <button-directive ></button-directive>
</div>



{{vm.serv.data}

下面是一个演示：

谢谢

您所需要的代码只需轻轻推一下。不需要事件广播或类似的东西

问题是，点击事件监听器在Angular的摘要循环之外工作，因此Angular watch不适合您。如果您将指令的代码更改为以下代码，它将起作用

.directive('buttonDirective', function (valueService) {

    var directive = {
        restrict: 'E',
        template: '<button ng-click="inc()">Inc</button>',
        link: linkFnc
    };

    function linkFnc(scope) {
        scope.inc = function() {
            valueService.inc();
        };
    }

    return directive;
})

指令（'buttonDirective'，函数（valueService）{ var指令={ 限制：'E'，模板：“公司”，链接：linkFnc }; 功能链接FNC（范围）{ scope.inc=函数（）{ valueService.inc（）； }; } 返回指令； })

这里有一个

太棒了！我们也不需要控制器中的$watch，因为我绑定了服务对象，然后传递了它的引用。我更新了小提琴：@MaximShoustin:这是一个更好的解决方案，因为我们不需要使用任何广播事件，这样解决方案更干净。谢谢你们两位！

.directive('buttonDirective', function (valueService) {

    var directive = {
        restrict: 'E',
        template: '<button ng-click="inc()">Inc</button>',
        link: linkFnc
    };

    function linkFnc(scope) {
        scope.inc = function() {
            valueService.inc();
        };
    }

    return directive;
})