Question

我有一个名为add-tags的指令，而不是我计划在应用程序的不同位置使用，我使用它将数据添加到数组然后从主ctrl中保存，然后用户可以在预览时编辑列表从不同的视图/ 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;
    }
  };
}]);

通过这种方式，您可以在一个位置显示标记，并且指令将标记包装起来而不是控制器，这样您就可以在任何地方重复使用。

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

1 个答案: