Question

所以，我试图在一个页面上有两个指令（techincally 3），看起来像这样：

<div kd-alert newsletter></div>
<div kd-alert cookie></div>

这是在索引页面上，所以没有控制器。我一直在使用指令来隔离范围，我发现即使在链接函数中，范围也是隔离的，如果你的指令使用控制器，模板可以看到两个控制器，如果两个控制器都有一个具有相同名称的属性，它们可以被另一个控制器覆盖，这是一场噩梦，所以我决定创建一个父指令，其中一个控制器为其他2个指令提供服务。

在这种情况下，父指令称为 kd-alert ，如下所示：

.directive('kdAlert', function () {
    return {
        restrict: 'A',
        controller: 'AlertController',
        link: function (scope, element, attr, controller) {

            // Have to use a watch because of issues with other directives
            scope.$watch(function () {

                // Watch the dismiss
                return controller.dismiss;

                // If the value changes
            }, function (dismiss) {

                // If our value is false
                if (dismiss === false || dismiss === 'false') {

                    // Remove the class from the element
                    element.removeClass('ng-hide');

                    // Else, if the value is true (or anything else)
                } else {

                    // Add the class to the element
                    element.addClass('ng-hide');
                }
            });

            // Get our buttons
            var buttons = element.find('button');

            // Binds our close button
            scope.bindCloseButton = function (cookieName) {

                // If we have a button
                for (var i = 0; i < buttons.length; i++) {

                    // Get our current button
                    var button = angular.element(buttons[i]);

                    // If our button is the close button
                    if (button.hasClass('close')) {

                        // If the button is clicked
                        button.on('click', function (e) {

                            console.log('clicked');

                            // Prevent any default actions
                            e.preventDefault();

                            // dismiss the alert
                            controller.dismissAlert(cookieName);

                            // Remove our element
                            element.remove();
                        });
                    }
                }
            };
        }
    };
})

控制器处理两个子指令的方法，但仍然很薄。它看起来像这样：

.controller('AlertController', ['$cookies', 'SubscriberService', 'toastr', function ($cookies, subscriverService, toastr) {
    var self = this;

    // Set our dismiss to false
    self.dismiss = false;

    // Set the flag
    self.getDismissValue = function (cookieName) {

        // Set our cookie
        self.dismiss = $cookies[cookieName] || false;
    };

    // Set the flag
    self.dismissAlert = function (cookieName) {

        // Set our cookie
        self.dismiss = $cookies[cookieName] = true;
    };

    // Saves our email address
    self.subscribe = function (email, cookieName) {

        // Subscribe
        subscriverService.subscribe(email).success(function () {

            // If we succeed, display a message
            toastr.success('You will now recieve occasional newsletters.');

            // Dismiss the alert
            self.dismissAlert(cookieName);
        });
    };
}])

现在我有一个 cookie 指令可以正常工作......

.directive('cookie', function () {

    return {
        restrict: 'A',
        require: '^kdAlert',
        templateUrl: '/assets/tpl/directives/cookie.html',
        link: function (scope, element, attr, controller) {

            console.log(scope);

            // Get our cookie name
            var cookieName = 'cookieAlert';

            // Get our dismiss value
            controller.getDismissValue(cookieName);

            // Bind our close button
            scope.bindCloseButton(cookieName);
        }
    };
})

当我刷新页面时，我可以在该范围内使用bindCloseButton方法清楚地看到范围。到现在为止还挺好。问题出在 newsletter 指令上，它看起来像这样：

.directive('newsletter', function () {

    return {
        restrict: 'A',
        require: '^kdAlert',
        templateUrl: '/assets/tpl/directives/newsletter.html',
        link: function (scope, element, attr, controller) {

            console.log(scope);

            // Get our cookie name
            var cookieName = 'newsletterAlert';

            // Get our dismiss value
            controller.getDismissValue(cookieName);

            // Bind our close button
            scope.bindCloseButton(cookieName);

            // Saves our email address
            scope.subscribe = function (valid) {

                // If we are not valid
                if (!valid) {

                    // Return from the function
                    return;
                }

                // Subscribe
                controller.subscribe(scope.email, cookieName);
            };
        }
    };
})

同样，如果我刷新页面，我可以清楚地看到该范围内的 bindCloseButton 方法，但出于某种原因我收到此错误：

scope.bindCloseButton不是函数

该内容出现在简报指令中。如果我从页面上删除cookie指令，我仍然会收到错误。

任何人都可以解释原因吗？

Answer 1

使用controller.bindCloseButton而不是scope.bindCloseButton。

由于范围的隔离，这种情况正在发生。你正在采用这种方法，这就是你在这里失去范围的原因。

访问父指令范围

1 个答案: