在指令内访问范围

Accessing scope within directive

本文关键字：范围 访问 指令      更新时间：2023-09-26

我有一个控制器，负责获取事件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.通知中没有任何内容。

编辑：尝试使用$watch。

编辑：将两组 html 移动到一个控制器后，DOM 操作使用 $watch（）。感谢你们俩的帮助！

尝试将 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
            }
        }
    });
};
相关文章：