ng-model 外部控制器答案

【问题标题】：ng-model outside controllerng-model 外部控制器
【发布时间】：2014-12-15 14:41:43
【问题描述】：

我正在尝试编辑 ng-controller 元素之外的视图。我可以通过使用$rootScope 和 dom 操作来解决它，但我想知道如何通过原生 angularjs 来解决它？

HTML：

  <body>
    <div class="container">
      <div class="block" ng-controller="BlockController as block">
          <div><strong>Name:</strong> {{ block.name }}</div>
          <a href ng-click="block.edit()">Edit</a>
      </div>
    </div>
    
        
    <div class="container-editor">
      <div id="block-editor"></div>
    </div>
  </body>

Js：

  angular.module('app', [])

  .controller('BlockController', BlockController);

  function BlockController($compile, $scope)
  {
      this.name = 'default name';

      this.edit = function() {
          var $editor_html = ' <input type="text" ng-model="block.name" name="name" /> <a href ng-click="block.save()">Save</a>';

          $editor_html = $compile($editor_html)($scope);
          angular.element(document.querySelector("#block-editor")).html('').append($editor_html);
      };

      this.save = function() {
          // save block
          angular.element(document.querySelector("#block-editor")).html('');
      };

  }

plnkr

这里是例子

【问题讨论】：

在控制器中保留编辑输入标签有问题吗？
您知道您可以在您的 Angular 应用程序中创建多个范围，一个嵌套在另一个范围内吗？然后给每个控制器一个自己的控制器，这样你就可以实现这个“Angular 方式”。
谢谢。 @Blazemonger 你能展示多个范围的例子吗？
您将 ng-controller="something" 添加到外部 div 并将 ng-controller="somethingelse" 添加到内部 div。如果要从子控制器访问父范围，请使用 $scope.$parent。 See this question for more.

标签： javascript angularjs angularjs-ng-model

【解决方案1】：

更多角度的方式？ 只需使用指令。基本上，您可以在子指令中获取父指令的控制器*。将父控制器视为其子/子的 API。

.directive('parent', function() {
  return {
    controller: function() {
      this.catchChild = function(child) {
          // code...
      };
    }
  };
})
.directive('child', function() {
  return {
    require: '^parent',
    link: function($scope, $element, $attrs, parentController) {
      $scope.jump = function() {
        // I'm jumping...
        parentController.catch($scope);
      };
    }
  };
})

我为你更新了你的 plnkr： http://plnkr.co/edit/qRURHRMWt9K5acLWmCHv?p=preview

(*) 可以将多个指令作为数组传递

angular.module('app', [])
.directive('parent1', function() {
    return {
        controller: function() {
            this.fn1 = function(child) {
                // code...
            };
        }
    };
})
.directive('parent2', function() {
    return {
        controller: function() {
            this.fn2 = function(child) {
                // code...
            };
        }
    };
})
.directive('child', function() {
    return {
        require: ['^parent1', '^parent2'],
        link: function($scope, $element, $attrs, controllers) {
            var parent1Controller = controllers[0];
            var parent2Controller = controllers[1];
            parent1Controller.fn1();
            parent2Controller.fn2();
        }
    };
})

【讨论】：