Question

我有一组标签，其中都有一个指令：

<div class="col-md-9 maincols" id="formEditor">
    <tabset>
        <tab heading="New subscriber" select="isSelected('newSub')">
            <new-subscriber></new-subscriber>
        </tab>
        <tab heading="Existing subscriber" select="isSelected('existingSub')">
            <existing-subscriber></existing-subscriber>
        </tab>
        <tab heading="Landing page" select="isSelected('landing')">
            <landing-page></landing-page>
        </tab>
    </tabset>
</div>

所有这3条指令的定义都是这样的：

angular.module('myApp')
    .directive('newSubscriber', function () {
        return {
            restrict: 'E',
            scope: {},
            replace: true,
            templateUrl: 'scripts/newsubscriber/newsubscriber.html',            
            controller: 'newsubscriberCtrl'
        };
    }); //... and so on

我（可能错误地）认为因为我已经为所有指令设置了scope: {}，所以它们现在应该具有完全隔离的范围并且彼此独立。

但事实并非如此，第一个指令控制器的绑定设法阻止第二个或第三个控制器中的值被绑定

例如在newsubscriberCtrl中我有：

app.controller('newsubscriberCtrl', ["$scope", "$routeParams", "UserMessages", "FormProvider", function ($scope, $routeParams, UserMessages, FormProvider) {

        $scope.formId = $routeParams.formId;

        var newSubscriberForm = new FormProvider.Form($scope);

        angular.extend($scope, newSubscriberForm);

        $scope.title = UserMessages.exampleText.genericPageTitle;
        $scope.description = UserMessages.exampleText.genericPageDescription;

        $scope.validationMessages = {
            contactNotSaved: UserMessages.validationMessages.contactNotSaved,
            contactCreatedOk: UserMessages.validationMessages.contactCreatedOk,
            contactNotCreated: UserMessages.validationMessages.contactNotCreated,
            requiredField: UserMessages.validationMessages.requiredField,
            passwordMismatch: UserMessages.validationMessages.passwordMismatch,
            isOpen: false
        }

    }]);

覆盖existingSubscriber控制器中的类似对象：

app.controller('existingsubscriberCtrl', ["$scope", "$routeParams", "UserMessages", "FormProvider", function ($scope, $routeParams, UserMessages, FormProvider) {

        $scope.formId = $routeParams.formId;

        var existingSubscriberForm = new FormProvider.Form($scope);

        angular.extend($scope, existingSubscriberForm);

        $scope.title = UserMessages.exampleText.genericPageTitle;
        $scope.description = UserMessages.exampleText.genericPageDescription;

        $scope.validationMessages = {
            contactNotSaved: UserMessages.validationMessages.contactNotSaved,
            contactSavedOk: UserMessages.validationMessages.contactSavedOk,
            requiredField: UserMessages.validationMessages.requiredField,
            passwordMismatch: UserMessages.validationMessages.passwordMismatch,
            isOpen: false
        }

    }]);

因此，在两个指令<pre>{{validationMessages | json }}</pre>的视图中，validationMessages对象具有第一个控制器的道具。

为什么会这样？我想念一个概念吗？如何将这些控制器彼此隔离，并且在控制器中有相似的道具，而不会相互影响？

旁注：我强烈希望避免使用控制器名称为所有作用域的所有内容添加前缀，例如$scope.newSubscriber.validationMessages等等......因为这会使整个点失败，因为我实际上会有一个大的整个标签部分和指令的控制器也没有意义。

Angular在v.1.3.0-beta.11
angular-ui-bootstrap于v.0.10.0

Answer 1

你试过这个吗？

angular.module('myApp')
    .directive('newSubscriber', function () {
        return {
            restrict: 'E',
            scope: { someValue = "&validationMessages" },
            replace: true,
            templateUrl: 'scripts/newsubscriber/newsubscriber.html',            
            controller: 'newsubscriberCtrl',
            link: function (scope, iElm, iAttrs) {
               var x = scope.someValue();
               // x = your messages              
            }
        };
    });

在您的控制器中

$scope.someValue

编辑免责声明：这有点来自记忆。当我面对类似的事情时，我觉得这很有启发性： http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

Answer 2

您已在/app/scripts/formbanner/formbanner.js中重复使用相同的控制器newsubscriberCtrl：

.directive('formBanner', function () {
    return {
        restrict: 'E',
        replace: 'true',
        templateUrl: 'scripts/formbanner/formbanner.html',
        controller: 'newsubscriberCtrl'
    };
});

existingSubscriber指令将formBanner作为子指令，加上formBanner指令没有孤立的范围。

因此，注入$scope newsubscriberCtrl的{{1}}与formBanner的范围相同!!

我已尝试删除existingSubscriber指令中的控制器属性，我看到它按预期工作。

一个控制器的作用域阻止了Angularjs中的其他作用域

2 个答案: