Question

我有一段简单的代码，根据我点击的按钮（这里是Plunker）用适当的模板替换ng-include代码：

<button ng-click="template='page1'">Show Page 1 Content</button>
<button ng-click="template='page2'">Show Page 2 Content</button>

<ng-include src="template"></ng-include>

<script type="text/ng-template" id="page1">
  <h1 style="color: blue;">This is the page 1 content</h1>
</script>

<script type="text/ng-template" id="page2">
  <div id="testanglr" ng-controller="PhoneListCtrl">
    <ul>
      <li ng-repeat="phone in phones">
        <span>{{phone.name}}</span>
        <p>{{phone.snippet}}</p>
      </li>
    </ul>
  </div>
</script>

我想要做的是使用javascript函数（而不是Angular的HTML帮助器标记）复制 Show Page 2 Content 按钮的相同行为。关于上面链接的Plunker，我希望第三个按钮与第二个按钮完全相同，但是这个行为应该在onClickHandler函数内执行，而不是警告。

Answer 1

如果我理解正确，你想要改变角度世界之外的角度。你可以这样做：

function onClickHandler() {
  var appElement = document.querySelector('[ng-app=plunker]');
  var appScope = angular.element(appElement).scope();
  appScope.template = 'page2';
  appScope.$apply();
}

http://plnkr.co/edit/WKLJ45yRYu1583C2ZnfT

Answer 2

我不知道你为什么要这样，但有办法实现这一点。

<强> JS

function onClickHandler() {

  var ele = document.getElementById("main");
  angular.element(ele).scope().template='page1';
  angular.element(ele).scope().$apply();
}

如果您使用的是jQuery，那么您可以直接使用$("#main")代替angular.element。在angular.element中，我们只需要使用DOM元素。我们不能使用ID选择器或类选择器，因为它已经通过angular从jqlite中删除了。 Updated Code

使用angularJS以编程方式更改模板源

2 个答案: