admin管理员组

文章数量:1278758

i have this situation:

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

Other way of doing this could be to have the button in html instead of an template

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

then maybe have a controller that has the loadTemplate() method that loads the template

but im not sure how this can be done.

Confusing? yes :)

Any ideas on this issue?

thanks

i have this situation:

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

Other way of doing this could be to have the button in html instead of an template

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

then maybe have a controller that has the loadTemplate() method that loads the template

but im not sure how this can be done.

Confusing? yes :)

Any ideas on this issue?

thanks

  • javascript
  • html
  • templates
  • button
  • angularjs
Share Improve this question edited Mar 14, 2013 at 7:23 Patrioticcow asked Mar 14, 2013 at 6:39 PatrioticcowPatrioticcow 27.1k76 gold badges221 silver badges339 bronze badges 1
  • I recently started with Angular and sure doing things correctly is confusing for me ... consider like Angular HTML is considered as template so using other templating tools with Angular not sure... looking forward for some answers... – Anil Namde Commented Mar 14, 2013 at 6:43
Add a ment  | 

1 Answer 1

Reset to default 8

Take a look at ngInclude in case it fits your needs. You can bind it to a template url to dynamically change the loaded template.

Check out the documentation for an example as well as this simple 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>

Also note that most AngularJS apps are likely using the built in routing to load appropriate controllers and views based on the url. See the tutorial and documentation/example on $route for more information.

本文标签： javascripthow to append a html template to a divdirective on click with angular jsStack Overflow

版权声明：本文标题：javascript - how to append a html template to a divdirective on click with angular js? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741237831a2363374.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。