javascript - 在指令内访问范围

Question

我有一个控制器负责获取事件 json 数据，如果有数据，则使用数据更新 dom，否则使用错误消息更新 dom：

//Controller.js
myApp.controller('EventsCtrl', ['$scope','API', function ($scope, api) {
    var events = api.getEvents(); //events: {data: [], error: {message: 'Some message'}}
}]);

//Directives.js
myApp.directive('notification', function () {
    return {
        restrict: 'A',
        link: notificationLink
    };
});
/**
 * Creates notification with given message
 */
var notificationLink = function($scope, element, attrs) {
    $scope.$watch('notification', function(message) {
        element.children('#message').text(message);
        element.slideDown('slow');
        element.children('.close').bind('click', function(e) {
            e.preventDefault();
            element.slideUp('slow', function () {
                element.children('#message').empty();
            });
       });
    });
};
//Services.js
...
$http.get(rest.getEventsUrl()).success(function (data) {
        // Do something with data
    }).error(function (data) {
        $window.notification = data;
    });

问题是元素更改被触发，但 $window.notification 中没有任何内容。

编辑：尝试使用 $watch。

编辑：将两组 html 移动到一个控制器后，DOM 操作与 $watch() 一起工作。感谢你们俩的帮助！

Answer 1

尝试将 http 请求的结果设置为控制器中的范围变量。然后在你的指令中观察那个变量。

myApp.controller('EventsCtrl', ['$scope', 'API',
    function ($scope, api) {
        $scope.events = api.getEvents(); //events: {data: [], error: {message: 'Some message'}}
    }
]);

//Directives.js
myApp.directive('notification', function () {
    return {
        restrict: 'A',
        link: notificationLink
    };
});

var notificationLink = function (scope, element, attrs) {
    scope.$watch('events', function (newValue, oldValue) {
        if (newValue !== oldValue) {
            if (scope.events.data.length) {
                //Display Data
            } else {
                //Display Error
            }
        }
    });
};