javascript - 如何从指令调用子 Controller 函数

Question

我有一个像这样的指令。在指令模板中我提到ng-controller='LoginController'. In login Controller i have a function 'Initalize函数 每次弹出窗口打开时都需要调用此函数 我如何从指令调用此函数？？？

var app = window.app;
app.directive('loginpop', function () {
return {
  template: '<div id="loginPopup" class="modal fade loginPopup" ng-controller="LoginController">' + 
                '<div class="modal-dialog">' + 
                    '<div class="modal-content">' + 
                        '<div class="modal-header">' + 
                            '<button type="button" id="close" class="close" ng-click="closeFun()" data-dismiss="modal" aria-hidden="true"><img src="images/closeBtn.png"  alt=""></button>' + 
                                '<h2>Log In</h2>' + 
                        '</div>' + 
                    '<div class="modal-inner">' + 
                        '<form class="form-horizontal Loginform" >' + 
                            '<div class="control-group">' + 
                                '<div id="loginErrormessage" ng-bind="loginErrormessage" ng-class="{loginErrorhidden:loginErrorStatus}" ></div>' + 
                                    '<div class="controls">' + 
                                        '<input type="text" id="inputTxt"  name="username" placeholder="Enter your user name"  ng-model="credentials.username" />' + 
                                    '</div>' + 
                            '</div>' + 
                        ' <div class="control-group">' + 
                            ' <div class="controls">' + 
                                ' <input type="password" id="inputPassword" name="password" placeholder="Enter your Password"  ng-model="credentials.password" />' + 
                            ' </div>' + 
                        ' </div>' + 
                ' <div class="control-group">' + 
                    ' <div class="controls check-forget">' + 
                        ' <div class="checkbox">' + 
                            ' <input type="checkbox" id="checkbox"  ng-model="rememberMe" />' + 
                                ' <label for="checkbox">Remember me</label>' + 
                        ' </div>' + 
                        ' <label class="forget">' + 
                            ' <a>Forget your password?</a>' + 
                        ' </label>' + 
                    ' </div>' + 
                ' </div>' + 
                ' <div class="control-group">' + 
                    ' <div class="controls">' + 
                        ' <button type="submit" class="btn yellowBtn" ng-click="login(credentials)" >log in</button>' + 
                    ' </div>' + 
                ' </div>' +
                ' </form>' + 
                ' <div class="join-content-wrap">' + 
                    ' <div class="social-wrap row">' + 
                        '  <div class="col-md-6 col-sm-6">' + 
                            ' <p>Or log in with:</p>' + 
                            ' <a href="javascript:;" class="fb-join" ng-click="facebookLogin()" >Facebook</a>' + 
                            ' <a href="javascript:;" class="twitter-join" >twitter</a>' + 
                        ' </div>' + 
                        ' <div class="col-md-6 col-sm-6">' + 
                            ' <p>Not a member yet?</p>' + 
                                ' <a  ng-click="redirectTosignuppage()" class="join-now-wrap"  >join now</a>' + 
                        ' </div>' + 
                    ' </div>' + 
                ' </div>' + 
                ' </div>' + 
                ' </div>' + 
                ' </div>' + 
                '</div>',

  restrict: 'E',
  transclude: true,
  replace:true,
  scope:true,
  link: function postLink(scope, element, attrs) {
      scope.$watch(attrs.visible, function(value){
      if(value == true){
          $(element).modal('show');
      }

      else
        $(element).modal('hide');
    });

    $(element).on('shown.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = true;
      });
    });

    $(element).on('hidden.bs.modal', function(){
      scope.$apply(function(){
        scope.$parent[attrs.visible] = false;
      });
    });
  }
};
});

Answer 1

将 Controller 定义为:

myApp.directive('helloWorld', function ($timeout) {
    return {
        /*
        .
        .
        .
        */
        controller: <controller>

        /*
        .
        .
        .
        */
    };
}

看这个例子:

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

function MyCtrl($scope) {
    $scope.text = "Any text";
}

function ChildCtrl($scope) {
    $scope.init = function () {
    	$scope.demo = "This is a demo";
    };
}

myApp.directive('helloWorld', function ($timeout) {
    return {
        restrict: 'E',
        replace: true,
        template: '<span ng-init="init()">Loading... {{demo}}</span>',
        controller: ChildCtrl
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    {{text}}
    <br/>
    <hello-world/>
</div>