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

AngularJS: Bind a directive to a Controller via a Service update

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

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

当然,如果controller和指令不共享同一个作用域就好了(指令中嵌入: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;
})

控制器:

.controller('FirstController', function ($scope, valueService) {
    var vm = this;
    vm.serv = valueService;

    $scope.$watch('vm.serv.getData()', function (newValue) {
        console.log("watch");
        console.log(newValue);
    });
})

html:

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

这是一个演示: https://jsfiddle.net/07tp4d03/1/

谢谢

您只需轻轻一按即可完成所有代码。不需要事件广播或类似的东西。

问题是,点击事件侦听器在 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;
})

这是一个fork of your fiddle that works