Question

我是Angular世界的新手，并在如何控制局部装载方面苦苦挣扎。在我的应用程序中更改下拉值我从服务器获取模板URL（我要呈现的部分的url）。现在使用该模板URL我想在我的页面中加载该部分。我知道插入部分可以使用指令完成，但是如何在指令中更改模板url以加载不同的部分？简单来说，我在我的控制器中更改部分方法，从服务器获取模板URL，在ng-change事件中我调用此函数，现在我如何使用模板url渲染部分我的目标占位符？

Answer 1

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

看一下下面的片段（或Plunkr，如果你想自己玩它！），它也做同样的事情：

＆＃13;

angular.module('app', [])
  .controller("MainCtrl",
    function() {
      this.partialId = 1;

      this.getPartialUrl = function() {
        return 'partial' + this.partialId + '.html';
      }
  });

＆＃13;

<!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>

＆＃13;

如何在angularjs中手动从控制器中注入部分

1 个答案: