AngularJS ngInclude 动态改变它的位置答案

【问题标题】：AngularJS ngInclude dynamically changing its locationAngularJS ngInclude 动态改变它的位置
【发布时间】：2013-09-27 07:29:47
【问题描述】：

我有一些部分模板，其中位置会根据用户通过 ng-click 的操作进行更改：

<div ng-include="contentUrl"></div>

<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>

这很好用，除非我上面的按钮在部分本身的内部，所以如果 testScriptForm.html 有一个按钮：

<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>

然后什么都没有发生。

这似乎是由于 ng-include 获得了一个新的（继承但不共享？）范围。

我想不通的是如何让包含的模板（部分）改变它自己的位置。

我确实尝试了一个函数来更改 $scope.$parent.contentUrl，它似乎确实发生了变化，但没有“传播”这些更改。

在咖啡脚本中：

  $scope.changeParentLocation = (location) ->
      $scope.$parent.contentUrl = location

还尝试了 $scope.$apply() 和 $scope.$parent.$apply() 并得到错误：

错误：[$rootScope:inprog] http://errors.angularjs.org/1.2.0rc1/$rootScope/inprog?p0=%24apply

也许我只是误用了包含...

【问题讨论】：

尝试使用对象"content.Url='someFile.html'" 而不仅仅是"contentUrl='someFile.html'"
谢谢！我试图弄清楚为什么 ng-click 无法更改包含的模板，并且永远不会猜到这是由于新范围..

标签： angularjs angularjs-scope

【解决方案1】：

使用“虚线模型”参考转义隔离范围：

<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
    <script src="script.js"></script>

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptForm.html">
      <h1>This is testScriptForm.html</h1>
      <button ng-click="tpl.contentUrl = '/partials/testScriptCase.html'">Change to Test Case</button>
    </script>

    <script type="text/ng-template" charset="utf-8" id="/partials/testScriptCase.html">
      <h1>This is testScriptCase.html</h1>
      <button ng-click="tpl.contentUrl = '/partials/testScriptForm.html'">Change to Test Form</button>
    </script>

  </head>
  <body>

    <div ng-controller="Ctrl">

      <fieldset>
        <div ng-include="tpl.contentUrl"></div>
      </fieldset>

    </div>

  </body>
</html>

function Ctrl($scope) {
  $scope.tpl = {};
  $scope.tpl.contentUrl = '/partials/testScriptForm.html';
}

【讨论】：

我认为这需要一个简短的解释。这实际上与 JavaScript 如何复制事物有关。如果没有点，我们将引用一个标量变量。如果 JavaScript 制作了一个副本，那么它就是一个副本。对副本所做的任何更改都不会反映在原件上。另一方面：如果有一个点，那么“副本”不是一个标量变量，而是一个对象（答案中的 tpl）。并且对象是通过引用“复制”的，因此复制的 tpl 仍将指向原始对象，因此 tpl.whatever 也会更改“原始”上的 tpl.whatever。
感谢所有完全解决它的响应者，并且解释非常有意义。事实上，我通过在按钮上使用 ng-click="shared = { prop: 1 }" 等尝试了一些简单的实验（认为这是因为我使用的是原始类型并且复制而不是引用是问题）但它不是不工作...但是简单的点符号很好...我个人认为在发布时是星期五下午；）