访问子范围

Question

我正在使用ngTagsInput angular。我的问题来自于尝试从父根范围访问displayTags。它不在那里。我想访问它，因为用户可以向displayTags添加新标签，这些标签运行正常。我想拿这些新标签发布。如何在循环外的$ root中访问displayTags？

角度代码如下：

var app = angular.module('recGroups', ['ngTagsInput']);

app.directive('group', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Group.html',
        link: function (scope, el) {
            //RemoveGroup
            scope.removeGroup = function (groupArray, index) {
                groupArray.splice(index, 1);
            }
        }
    }
});

app.directive('rule', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Rule.html',
        link: function (scope, el) {
            scope.removeRule = function (ruleArray, index) {
                ruleArray.splice(index, 1);
            }

            scope.addTag = function () {
                scope.$parent.rule.Rules.push({});
            }
        }
    }
});

app.directive('tag', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Tag.html',
        controller: 'displayTags',
        link: function (scope, el) {
            scope.removeTag = function (tagArray, index) {
                tagArray.splice(index, 1);
            }
        }
    }
});

app.controller('displayTags', function ($scope, data) {
    $scope.displayTags = [];
    // tag stuff to manipulate when have proper tag model
    if ($scope.tag.TagIds != null) {
        $.each($scope.tag.TagIds, function (scopeIndex, scopeValue) {
            $.each(data.Project.Tags, function (tagIndex, tagValue) {
                if (tagValue.Id == scopeValue) {
                    $scope.displayTags.push({ Id: tagValue.Id, Name: tagValue.Name, ProjectId: tagValue.ProjectId });
                }
            });

        });
    }

});

我也提交此图像作为html的视觉显示：

简化Html是这样的：

  <group ng-repeat="group in groups">
       <rule ng-repeat="rule in group.Rule.Rules">
          <tag ng-repeat="tag in rule.Rules">
            <tags-input ng-model="displayTags" display-property="Name">
            </tags-input>
          </tag>
       </rule>
    </group>

Answer 1

您可以使用bi-directional binding，而不是使用scope: true，而不是使用scope: { displayTags: '=' // Bi-directional binding } 。

displayTags

或者如果model是您的^model（或父app.directive('tag', function () { return { restrict: 'E', scope: true, require: "ngModel", templateUrl: '../../Content/templates/RecruitingGroups/Tag.html', link: function ( scope, el, attrs, ngModelCtrl ) { scope.doSomething = function() { ngModelCtrl.$setViewValue( 'testing' ); // Update model } } } }); ），则可以使用NgModelController

{{1}}