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 に答える