Question

我有以下Angular控制器：

function TagListController($scope) {
  $scope.model = {
    tags: ['tag 1', 'tag 2', 'tag 3' ],
    template: 'list'
  }  
  $scope.showTemplate = function (template) {
    $scope.model.template = template;
  };
}

function TagEditController($scope) {
  $scope.tagToEdit = $scope.$parent.model ???
}

我有以下HTML来显示标签列表和编辑标签：

<ul ng-if="model.template == 'list'" ng-controller="TagListController">
  <li data-ng-repeat="tag in model.tags">
    <span data-ng-bind="tag.name"></span></br>
    <a href="" data-ng-click="show('edit')"</a>
  </li>
</ul>

<script type="text/ng-template" id="edit">
  <div ng-controller="TagEditController">
    Edit template
  </div>
</script>

<div ng-if="model.template == 'edit'" ng-include="'edit'"></div>

使用model.template我可以显示编辑模板。

但我如何在EditTagController中使用点击了编辑链接的标记？

我知道它将是$scope.$parent.model.tags.

中的其中一项

我只是不知道如何选择它以及选择它的最佳方法。

Answer 1

这是使用factory或service。

的好地方

请参阅this jsBin

您希望在工厂内存储公共数据，而不是处理$parent或$rootScope。

您可以创建这样的工厂：

function tagService() {
  var observerCallbacks = [];

  var currentTag;

  function getCurrentTag() {
    return currentTag;
  }

  function setCurrentTag(tag) {
    currentTag = tag;
    notifyObservers();
  }

  function notifyObservers() {
    angular.forEach(observerCallbacks, function(callback) {
      callback();
    });
  }

  function registerObserverCallback(callback) {
    this.observerCallbacks.push(callback);
    notifyObservers();
  }

  return {
    getCurrentTag: getCurrentTag,
    setCurrentTag: setCurrentTag,
    registerObserverCallback: registerObserverCallback,
    notifyObservers: notifyObservers
  };
}

在这里，我还使用observer模式通知任何正在监听变更的人setCurrentTag。这样，如果您更改标签，两个控制器都知道。

您的TagListController可能如下：

function TagListController($scope, tagService) {
  $scope.model = {
    tags: ['tag 1', 'tag 2', 'tag 3' ],
    template: 'list'
  };

  $scope.editTag = function(tag) {
    tagService.setCurrentTag(tag);
    $scope.model.template = 'edit';
  };
}

你的TagEditController喜欢：

function TagEditController($scope, tagService) {
    tagService.registerObserverCallback(function() {
    $scope.tagToEdit = tagService.getCurrentTag();
  });
}

Answer 2

如何使用Angular路由？您可以在EditTagController中设置类似“yourapp / tags / {tag}”的路径，这样您就可以将当前标记作为参数。

Something like this

从父范围的列表中获取一个项目

2 个答案: