Question

我有一些部分模板，其位置根据用户操作通过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，它似乎确实改变但没有“传播”这些更改。

在coffeescript中：

  $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

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

Answer 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';
}

AngularJS ng包括动态更改其位置

1 个答案: