如何从指令调用控制器函数

时间:2016-09-16 16:08:13

标签: angularjs angularjs-directive

我是角度新手,我试图从指令调用控制器函数。但是没有想到什么是回调功能的正确方法。这是我的javascript

指令:

    angular.module("myApp").directive('contenteditable', function() {
return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
        element.bind('blur change', function() {
            scope.$apply(function() {
                ngModel.$setViewValue(element.html());
                scope.editTranslation(element.attr('data-ng-model'));
            });
         });

        ngModel.$render = function() {
            element.html(ngModel.$viewValue);
        };
    }
}
 });

控制器:

angular.module("myApp").controller("MyController", function ($scope, $http, $log) 
  {
   $scope.editTranslation = function (flagTranslation)         {
   console.log(flagTranslation);};

HTML:

<tr class="statistics_table_row cursor" data-ng-repeat="ft in flagsWithTranslation">
  <td contenteditable="true" ng-model="ft.translation" >{{ ft.translation }}</td></tr>

我在设置模型值指令后基本上尝试通过给定模型作为参数来调用控制器函数scope.editTranslation()。有人可以帮我这个

1 个答案:

答案 0 :(得分:0)

我通过添加范围解决它:{&#39; ctrlFn&#39; :&#39;&amp;&#39;},在指令中。这是我的工作代码:

.directive('contenteditable', function() {
return {
    require: 'ngModel',
    scope: { 'ctrlFn' : '&'},
    link: function(scope, element, attrs, ngModel) {
        element.bind('blur change', function() {
            scope.$apply(function() {
                ngModel.$setViewValue(element.html());
                scope.editTranslation(element.attr('data-ng-model'));
            });
         });

        ngModel.$render = function() {
            element.html(ngModel.$viewValue);
        };
    }
}
});

HTML:

  <td contenteditable="true" ctrl-fn="ctrlFn(ft)" ng-model="ft.translation"