Question

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

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

当然，如果控制器和指令不共享相同的范围（指令中的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;
})

控制器：

.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/

由于

Answer 1

您需要的所有代码都有点推动。不需要事件广播或类似的东西。

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

.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

AngularJS：通过服务更新将指令绑定到Controller

1 个答案: