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

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>

所有这三个指令都被类似地定义为:

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的版本是v1.3.0 -beta.11
• angular-ui-bootstrap在v0.10.0

Answer 1

您在/app/scripts/formbanner/formbanner.js中重用了相同的控制器newsubscriberCtrl:

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

existingSubscriber指令有formBanner作为子指令，加上formBanner指令没有一个孤立的作用域。

因此，注入formBanner的newsubscriberCtrl的$scope与existingSubscriber的作用域是一样的!!

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

Answer 2

你试过吗?

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/