angularjs指令范围功能不起作用

Question

已创建指令以动态地将header.html包含在主索引html文件中。

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>

完整的代码@ http://plnkr.co/edit/Iau6Fu?p=preview

范围变量（$ scope.version）正在运行。

但是没有发生范围函数调用（$ scope.getusername）。

任何建议表示赞赏。感谢。

Answer 1

代码依赖于模板中的ngInit来在作用域上执行名为getusername()的方法。 getusername()放置在后链接功能的范围内，在评估 ngInit后执行。因此ngInit永远不会调用getusername()。

要解决此问题，请将getusername()放在指令控制器的范围内，以便ngInit可以使用...

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

Plunker

请将相关代码放在您的问题中，而不是放在插件中。