从多个控制器上的指令访问范围的正确方法

Question

我有一个名为 add-tags 的指令，我计划在应用程序的不同位置使用它，我用它来向数组添加标签，然后从主 ctrl 保存，然后用户可以编辑列表从不同的 view/ctrl（模态）预览时，在主页上我有：

<add-tags tags="tags"></add-tags>

我的指令设置如下：

'use strict';

        angular.module('theApp')
            .directive('addTags', function() {
                return {
                    templateUrl: 'components/add-tags/add-tags.html',
                    //restrict: 'EA',
                    scope: {
                       tags:'='
                     },
                    link: function($scope, $element, attrs) {
                    } //link
                };
            });

如何从编辑控制器访问以前的标签数据？当我这样做时，

<add-tags tags="workDetails.tags"></add-tags>

来自范围的整个数据都消失了，但是当我这样做时：

<span ng-repeat="x in workDetails.tags">
           <h1>{{x.name}}</h1>
        </span>

我可以看到标签列表，任何帮助将不胜感激:)

我正在添加 add-tags.html 示例：

<div ng-repeat="tag in tags" class="text-center new-item">
            <div class="input-group">
                <input type="text" name="" class="form-control" ng-model="tag.name">
                <span class="input-group-btn">
                    <button 
                       type="button" 
                       class="btn btn-default"
                       ng-click="deleteTag($index)">
                       Delete
                    </button>
                </span> <!-- /.input-group-btn -->
            </div> <!-- /.input-group -->
        </div>

        <div class="form-group" ng-hide="tags.length == tags_max">
            <input type="text" class="form-control" placeholder="Enter tag:" ng-model="tag">
        </div> 

        <!-- /.form-group -->
        <button 
            type="button" 
            class="btn btn-primary center-block"
            ng-disabled="tags.length == tags_max"
            ng-class="{ 'btn-danger': tags.length == tags_max}"
            ng-click="addTag()">
            Add tag
        </button>

        <hr>

Answer 1

您提供的代码没有任何问题。但是 - 除非我遗漏了一些信息 - 是否有可能你假设你的 "workDetails" 对象应该随处可用？我能让你的场景工作的唯一方法是添加一个 "workDetailsService" 来保存标签状态。

Here's a working plunkr 您提供的代码位，但添加了 workDetailsService 以维护状态和一些路由。

基本上我添加了一个维护标签的服务：

theApp.factory('workDetailsService', function() {
  return {
    tags: [{
      name: "Tag 1"
    }, {
      name: "Tag 2"
    }, {
      name: "Tag 3"
    }]
  }
});

并将该服务注入到两个指令中，"listTags" 和 "editTags":

theApp.directive('editTags', ['workDetailsService', function(workDetailsService) {
  return {
    templateUrl: '/edit-tags.html',
    link: function($scope, $element, attrs) {

      $scope.tags_max = 4;
      $scope.tags = workDetailsService.tags;

      $scope.addTag = function() {
        workDetailsService.tags.push({
          name: $scope.tag
        })
      }
      $scope.deleteTag = function(index) {
        workDetailsService.tags.splice(index, 1)
      }
    }
  };
}]);

theApp.directive('listTags', ['workDetailsService', function(workDetailsService) {
  return {
    templateUrl: '/list-tags.html',
    link: function($scope, $element, attrs) {
      $scope.tags = workDetailsService.tags;
    }
  };
}]);

这样您就可以将标签状态放在一个地方，指令将标签而不是控制器包装起来，这样您就可以在任何地方重复使用。

从多个控制器上的指令访问范围的正确方法

Correct way to access the scope from a directive on multiple controllers

javascript

arrays

json

angularjs

mean-stack