angularjs directive scope function not working

Question

Have created a directive to dynamically include the header.html in the master index html file.

app.js

var app = angular.module('plunker', []);

app.directive('header', function() {

        var directive = {};
        directive.restrict = 'AE';
        directive.replace = true;
        directive.scope = {};
        directive.templateUrl = "header.html";
        directive.link = function postLink($scope, $element, $attrs, $resource) {
                  $scope.version = "1.1.1.1";
                  $scope.getusername = function() {
              $scope.username = "pals";
              };
              };
        return directive;
});

header.html

<div ng-init="getusername()">
  <p>
    This part of the hader is always here
  </p>
  <p>
    User {{username}} is logged in :D
  </p>
  <p>
  {{version}}
  </p>
</div>

Complete code written @ http://plnkr.co/edit/Iau6Fu?p=preview

The scope variable ($scope.version) is working.

But the scope function call ($scope.getusername) is not happening.

Any advice is appreciated. Thanks.

Anthony Chu · Accepted Answer · 2014-07-12 08:00:55Z

1

The code relies on ngInit in the template to execute a method called getusername() on the scope. getusername() is placed on the scope in the post-link function, which is executed after ngInit is evaluated. So ngInit never invokes getusername().

To fix this, place getusername() on the scope in the directive's controller so it is available to ngInit...

directive.controller = function($scope) {
    $scope.getusername = function() {
        $scope.username = "pals";
    };
};

Plunker

Please place the relevant code in your question rather than in a plunker.

answered Jul 12, 2014 at 8:00

Anthony Chu

37.6k10 gold badges85 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs directive scope function not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related