AngularJS ngInclude动态更改其位置

Ste*_*eve 6 angularjs angularjs-scope

我有一些部分模板,根据用户操作通过ng-click更改位置:

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

<button ng-click="contentUrl = '../partials/testScriptForm.html'">Add Test Script</button>
Run Code Online (Sandbox Code Playgroud)

除非我上面的按钮位于部分内部,否则这很有用,所以如果testScriptForm.html有一个按钮:

<button ng-click="contentUrl = '../partials/testScriptCase.html'">Add Test Case</button>
Run Code Online (Sandbox Code Playgroud)

然后什么都没发生

这似乎是由于ng-include获得了一个新的(继承但未共享的)范围.

我无法想象的是如何获得包含的模板(部分)来改变自己的位置.

我确实尝试了一个函数来改变$ scope.$ parent.contentUrl,它似乎确实改变但没有"传播"这些改变.

在coffeescript中:

  $scope.changeParentLocation = (location) ->
      $scope.$parent.contentUrl = location
Run Code Online (Sandbox Code Playgroud)

还尝试$ scope.$ apply()和$ scope.$ parent.$ apply()在那里得到错误:

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

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

Ste*_*wie 7

使用"点模型"参考来逃避隔离范围:

<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>
Run Code Online (Sandbox Code Playgroud)
function Ctrl($scope) {
  $scope.tpl = {};
  $scope.tpl.contentUrl = '/partials/testScriptForm.html';
}
Run Code Online (Sandbox Code Playgroud)

  • 我认为这需要一个简短的解释.这实际上与JavaScript如何复制内容有关.没有点,我们引用标量变量.如果JavaScript复制了它,那就是副本.对副本所做的任何更改都不会反映在原件上.另一方面:如果有一个点,那么"复制"不是标量变量而是一个对象(答案中的tpl).并且一个对象被引用"复制",因此复制的tpl仍将指向原始对象,因此tpl.whatever将改变tpl.whatever在"原始"上也是如此. (5认同)