3

我有这种情况：

<somebutton></somebutton>

...

app.directive("somebutton", function(){
    return {
        restrict: "E",

        scope: {
          // not sure what i can do here
        },

        template: '<button ng-click="loadTemplate()" type="button">Text</button>',

        link: function(scope, element){
            scope.loadTemplate = function(){

                //TODO: append "home.html" template inside body directive
            }
        }
    }
});

...

<script type="text/ng-template" id="home.html">
    <div>home</div>
</script>

...

<div body ></div>

这样做的其他方法可能是在 html 中使用按钮而不是模板

<button ng-click="loadTemplate()" type="button">Text</button>

然后可能有一个控制器，它具有loadTemplate()加载模板的方法

但我不确定如何做到这一点。

令人困惑？是的 ：）

关于这个问题的任何想法？

谢谢

4

1 回答 1

8

看看ngInclude它是否符合您的需求。您可以将其绑定到模板 url 以动态更改加载的模板。

查看文档以获取示例以及这个简单的 plnkr。

<body>
  <button ng-click="template='home.html'">Home</button>
  <button ng-click="template='home2.html'">Home 2</button>
  <div ng-include src="template"></div>
</body>
<script type="text/ng-template" id="home.html">
    <div>loaded home</div>
</script>
  <script type="text/ng-template" id="home2.html">
    <div>loaded home 2</div>
</script>

另请注意，大多数 AngularJS 应用程序可能使用内置路由来根据 url 加载适当的控制器和视图。有关更多信息，请参阅$route上的教程和文档/示例。

于 2013-03-14T07:14:07.537 回答