如何从angularjs中的控制器手动注入部分答案

【问题标题】：How to manually inject partial from controller in angularjs如何从angularjs中的控制器手动注入部分
【发布时间】：2014-10-20 13:03:55
【问题描述】：

我是 Angular 世界的新手，正在努力研究如何控制部分加载。在我更改下拉值的应用程序中，我从服务器获取模板 url（我要呈现的部分的 url）。现在使用该模板 url 我想在我的页面中加载该部分。我知道插入部分可以使用指令来完成，但是如何更改指令中的模板 url 以加载不同的部分？简而言之，我在控制器中 change partial method 从服务器获取模板 url，在 ng-change 事件中我正在调用这个函数，现在我如何使用模板 url 来呈现部分我的目标占位符？

【问题讨论】：

指令的templateUrl 属性可以是函数。您可以观察元素指令的变化并检索新模板。您需要使用 $compile 编译部分以供 Angular 使用，并使用正确的 scope 并将新模板插入所需的元素中。我不会在你的控制器中这样做，除非它是指令的控制器。

标签： javascript angularjs angularjs-directive

【解决方案1】：

您可以简单地使用ng-include 指令来加载部分。您将其值绑定到包含部分 URL 的变量。此变量可以绑定到下拉列表（或其他任何内容）。这样，如果您在下拉列表中选择一个项目，部分 URL 将被更新，从而加载相应的部分。

看看下面的 sn-p（或者Plunkr，如果你想自己玩的话！），它做同样的事情：

angular.module('app', [])
  .controller("MainCtrl",
    function() {
      this.partialId = 1;

      this.getPartialUrl = function() {
        return 'partial' + this.partialId + '.html';
      }
  });

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    <script type="text/ng-template" id="partial1.html">
      <h2>Partial 1</h2>
      <p>Content loaded from FIRST partial</p>
    </script>
    <script type="text/ng-template" id="partial2.html">
      <h2>Partial 2</h2>
      <p>Content loaded from SECOND partial</p>
    </script>
  </head>

  <body ng-controller="MainCtrl as Main">
    <h1>Partials from dropdown</h1>

    <select ng-model="Main.partialId">
      <option value="1">Partial 1</option>
      <option value="2">Partial 2</option>
    </select>
    
    <div ng-include="Main.getPartialUrl()"></div>
  </body>

</html>

【讨论】：