從角度指令調用控制器功能

Question

如何在控制器中定義的指令內部調用角度函數？

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

app.directive('hello', function () {
    return {
        scope: {
            myObj: '=hello'
        },
        template: '<button  class="btn btn-primary" ng-click="dirFunction()">Click</button>',
        link: function (scope) {
            scope.dirFunction = function () {
                scope.count++;
                console.log('I am dirFunction');
            };
            var countChange = function (someVar) {
               console.log('I am countChange');
              // scope.changeCount(someVar); // call  changeCount() defined in controller
            };

           // scope.$watch('myObj', hello);
            scope.$watch('count', countChange);
        }
    }
});


function MyCtrl($scope) {
    $scope.message = 'Can I do it?';
    $scope.myObj = {data:'I need this data object',count:1};

    $scope.changeCount = function(someVar) {
        console.log("I am changeCount from controller,I have someVar in hand");
    }

}

我需要調用注釋的scope.changeCount(someVar); 在指令中。

參見HTML，

<div ng-app="myApp">
  <div class="container" ng-controller="MyCtrl">
        <div class="row">
          {{message}}
          <div hello="myObj"></div>  
        </div><!--/row-->
  </div>
</div>

在這里擺弄。

Answer 1

在使用隔離范圍從指令內部調用父范圍內的控制器函數時，請使用& ：

HTML

<div hello="myObj" change-count="changeCount(someVar)"></div> 

指示

app.directive('hello', function () {
    return {
        scope: {
            myObj: '=hello',
            changeCount:"&changeCount"
        },
        template: '<button class="..." ng-click="dirFunction()">Click</button>',
        link: function (scope) {
            scope.dirFunction = function () {
                scope.myObj.count++;
                console.log('I am dirFunction '+scope.myObj.count);
            };
            var countChange = function (someVar) {
                console.log('I am countChange '+someVar);
                scope.changeCount({'someVar':someVar});
            };             
            scope.$watch('myObj.count', function(newValue){
                countChange(newValue)
            });
        }
    }
});

小提琴