javascript - 检测传递到指令的依赖项的更改

Question

我有一个工厂，我正在将其传递给指令。工厂内有一些数据通过函数更新:

app.factory('CallsDataService', function() {

    var factory = {};

    //Contacts Handled data
    var data =  [
        {
            "id": "0",
            "handle": "A",
        },
        {
            "id": "1",
            "handle": "B",

        }
    ];


    factory.getData = function(){
        return data;
    };

    factory.updateData = function(value){
        data[0].handle= value);
    };

..............

在指令中，它作为依赖项传入:

app.directive('pieChart', ['CallsDataService', function(CallsDataService) {
    return {
        // use a new isolated scope
        restrict: 'AE',
        replace: 'true',
        scope:{
            templateUrl: "@"
        },
        link: function(scope,element,attrs){



            //Draw initial chart with default data
            drawChart();

            function drawChart() {
            }

....

我的问题是:如果工厂中的数据通过在代码的其他部分调用factory.updateData函数来更新，我如何在指令中检测到这一点？我认为必须使用 $broadcast 或 $watch 但到目前为止我还没有成功(不用说我是 Angular 的新手)

如有任何指点，我们将不胜感激。

非常感谢。

Answer 1

最广泛的方法是使用 $broadcast，尽管这可能不是最有效的方法，但它通常可以完成工作。

注意，$broadcast 的工作原理是将数据发送到子节点，$emit 的工作原理是将数据发送到父节点。这里引用的节点通常是指令附加到的元素(或 Controller 所在的位置)。由于工厂/服务不附加到任何范围/元素，因此我们需要注入(inject)一个元素。实现此目的的最简单方法是从那里注入(inject) $rootScope 服务和 $broadcast。

第 1 步。添加 $rootScope

app.factory('CallsDataService', function($rootScope) {
    ...
});

第 2 步。 将 $broadcast 添加到方法

factory.updateData = function(value){
    data[0].handle = value;
    $rootScope.$broadcast('updatedData', data);  //Note data here should be an object you want to pass to the listeners.
};

第 3 步。监听指令中的事件

link: function(scope,element,attrs){
    scope.$on('updateData', function(data){
        //Do whatever you like here
    })
}

请记住，有更好的方法可以通过更好的设计流程来做到这一点，如果您正在设计高性能应用程序，那么您会尽量避免 $broadcasting 或 $watching。但是，如果您刚刚开始并且应用程序的性能并不是关键(这意味着您的应用程序上不会有一百万个东西)，那么它应该完全没问题。