javascript - AngularJS 自定义指令 $watch 不起作用

Question

html:

<mtx-matrice-form mtxMatrice="calendar"></mtx-matrice-form>

js:

'use strict';

angular.module('matrixarMatrice', []).directive('mtxMatriceForm', function () {
    return {
        restrict: 'E',
        templateUrl: 'views/matrice/matrice.html',
        scope: {
            mtxMatrice: '='
        },
        link: function (scope, element, attrs) {
            var updateDisplay = function () {
                //TODO
                for (var goDate in scope.outwardDates) {
                    console.log(goDate);
                }
            };
            scope.$watch(scope.mtxMatrice, updateDisplay, true);
        }
    };
});

js:

'use strict';

angular.module('matrixarSearch', [
    'mm.foundation',
    'matrixarConfig',
    'matrixarAutocomplete',
    'matrixarCalendar',
    'matrixarMatrice'
]).controller('MainController', function ($scope, $translate, CitiesService, SearchService, mtxConstants) {
...
        search.calendar = function (id) {
            if (search.origin && search.destination && search.goDate && search.returnDate) {

                if (search.goDate) {
                    var tmpGoDate = search.goDate; // needs 2014-12-23
                    goDate = tmpGoDate.split('/').reverse().join('-');
                }
                if (search.returnDate) {
                    var tmpReturnDate = search.returnDate; // needs 2014-12-23
                    returnDate = tmpReturnDate.split('/').reverse().join('-');
                }

                SearchService.search(search.origin.rrCode, search.destination.rrCode, goDate, returnDate, search.paxes.value, search.typo.value, search.card.value).then(function (data) {
                    $scope.calendar = data;
                }).catch(function (rejection) {
                    //TODO gérer les erreurs
                });
            }
        };
...

当我点击我的按钮时，我调用 search.calendar 来初始化我的 $scope.calendar 但我的指令中的 watch 不会被调用。

如何观察 mtxMatrice="calendar" 的值是否更新？

Answer 1

您正在编写错误的语法来监视范围属性。更改您的代码

scope.$watch(scope.mtxMatrice, updateDisplay, true);

至

scope.$watch('mtxMatrice', updateDisplay, true);