防止`ng-include`创建隔离作用域。AngularJS

Question

我是使用 ng-include src 指令在我的HTML中的多个位置。每一个 ng-include 都为自己创建了一个隔离范围，这显然给我带来了很多麻烦。

例如：

<div ng-controller="parent">
    <div ng-include src="'id1'">
    </div>
    <div ng-include src="'id2'">
    </div>
    <div ng-include src="'id2'">
    </div>
</div>

在上述提到的html中，创建了4个作用域。其中一个在父级定义了controller，另外3个是默认情况下在每个ng-include src处创建的。

是否有可能防止ng-include为自身创建隔离作用域？如果不可能，那么是否有解决方法？

- Aditya Ponkshe

---

@pankajparkar 怎么做？你有任何示例可以展示如何完成吗？ - Aditya Ponkshe

ng-include不会创建一个隔离的作用域，而是创建一个子作用域，该作用域与父作用域不隔离。在重新发明轮子之前，请先了解造成了什么问题。创建子作用域是有原因的——它可以防止模板相互干扰。 - Joe Enzminger

@JoeEnzminger 在通过'ng-include src'加载的模板中使用的 ng-model 不会在父控制器中得到更新。 - Aditya Ponkshe

这是Angular中经典的“点符号”问题。这个问题的第一个和第二个答案应该能够为解决您的问题提供一些帮助。也可以通过使用“ControllerAs”语法来解决它。 - Joe Enzminger

@JoeEnzminger 我知道这件事。要实现它，我必须改变很多的代码，但这是我打算以后再做的。目前正在寻找一个快速解决方案。 - Aditya Ponkshe

Answer 1

你需要创建一个自定义指令，该指令可以加载指定的模板但不使用隔离作用域。

HTML

<div ng-controller="parent">
    <div my-directive template-path="id1">
    </div>
    <div my-directive template-path="id2">
    </div>
    <div my-directive template-path="id2">
    </div>
</div>

指令

.directive('myDirective', function() {
  return {
      restrict: 'AE',
      templateUrl: function(ele, attrs) {
          return attrs.templatePath;
      }
  };
});

工作中的Plunkr

- Pankaj Parkar

---

它没有返回任何东西。 - Aditya Ponkshe

成功了！非常感谢。最终我在指令的templateurl中提供了硬编码路径，但这解决了作用域问题。对于这个解决方案点赞。 - Aditya Ponkshe

不应该硬编码它，否则它将无法用作可重用组件。 - Pankaj Parkar

是的，但是当我使用function(ele, attrs) { return attrs.templatePath; }时出现了一些错误。目前正在修复它。 - Aditya Ponkshe

@AdityaPonkshe，请检查我添加的 Plunkr。 - Pankaj Parkar