6

我有一些部分模板，其中位置通过 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

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

4

1 回答 1

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>

function Ctrl($scope) {
  $scope.tpl = {};
  $scope.tpl.contentUrl = '/partials/testScriptForm.html';
}
于 2013-09-27T07:42:26.060 回答