CODEWITHSUNDEEP
angularjsangularjs-directive
Lekasp
Lekasp

Reputation: 223

AngularJS: include not working from a custom directive

I have a custom directive and I would like to use it to include an html content to the document after clicking on it.

Plunker: http://plnkr.co/edit/u2KUKU3WgVf637PGA9A1?p=preview

JS:

angular.module("app", [])
.controller("MyController", function ($scope) {

})
.directive('addFooter', ['$compile', '$rootScope', function($compile, $rootScope){
    return {

     restrict: 'E',
         template: '<button>add footer</button>',
         controller: 'MyController',
        link: function( scope, element, attrs, controller) {
            element.bind( "click", function() {
                scope.footer = "'footer.html'";

       })}
    };
 }])

HTML:

<body ng-app="app">

  <script type="text/ng-template" id="footer.html">
    FOOTER
  </script>

<div ng-controller="MyController">

    <add-footer></add-footer>

    <div ng-include="footer"></div>

</div>

</body>

Not sure why it is not working, as it worked fine before it was moved into the directive. Outside the directive, I was also referencing to $scope.footer with some link. I tried using $rootScope, but also no effect. Any tips please?

Upvotes: 0

Views: 292

Answers (1)

Umidbek
Umidbek

Reputation: 1504

First. Remove unnecessary quote symbols:

element.bind( "click", function() {
    scope.footer = "footer.html"; // not "'footer.html'"
});

Second. You should notify angularjs that you have asynchronously updated scope values:

element.bind("click", function() {
    scope.$apply(function() {
        scope.footer = "footer.html";
    });
});

Or like that

element.bind("click", function() {
    scope.footer = "footer.html";
    scope.$apply();            
});

Upvotes: 1

Related Questions