如何在AngularJS指令中调用控制器函数

时间:2017-03-05 16:01:27

标签: javascript html angularjs angular-directive

页面中的控制器:

function openGroupsPage() {

 //window.location.replace('http://www.google.com');

 setTimeout(function() {
  for (i = 0; i < 100; i++) {
    console.log(i)
  }
 } , 1000)
}


openGroupsPage()

这是我的指令代码 我的指令代码:

(function () {
 'use strict';
  angular.module('LVS').controller('LVSCtrl', LVSCtrl);
  function LVSCtrl($scope) {
   $scope.OnChange = function() {
   // do
   }
  }
 })();

页面中的我的指示:

(function () {
  'use strict';

  angular.module('LVS')
      .directive('taEmp', taEmp);

  function taEmp() {
      return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            ngDisabled: '=',
            ngReadonly: '=',
            ngChange: '&',
        },
        templateUrl: 'app/pages/ESS-TA/Common/Directives/TAEmpPicker.html',

    }

    })();

我的指令不在控制器中调用函数

1 个答案:

答案 0 :(得分:1)

我通过在你的指令中使用$watch并将控制器函数解析为param来使其工作。一旦输入值改变,该函数将被执行。

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.name = '';
    $scope.someFunction = function (data) {
       console.log(data);
    };
});

myApp.directive('myDirective', function () {

  return {
      restrict: 'E',
      scope: {
        model: '=ngModel',
        function: '='
      },
      template: '<input type="text" ng-model="model" function="function" my-directive>',
      link: function (scope, element, attrs) {
         scope.$watch('model', function (newValue, oldValue) {
           if (newValue && newValue !== oldValue) {
             if (typeof scope.function === 'function') {
               scope.function('test');
             }
           }
         }, true);
      }
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <my-directive ng-model="name" function="someFunction"></my-directive>
</div>
&#13;
&#13;
&#13;