将指令操作绑定到父控制器 AngularJS

Question

我有一个配置文件更新指令，我想从父范围触发更新操作。这是我的代码：

main.js

angular.module('app')
.directive('profile',{
    scope: {
        updateFromDirective: "="
    },
    template: '<form><input ng-model="name"/></form>',
    controller: function(){
        this.updateFromDirective = function(){
            /* update here */
        };
    }
})
.controller('Ctrl', function(){
    this.updateFromController = function(){
        if(condition){
            /* how do I call updateFromDirective here ??? */
        }
    };
});

index.html

<div ng-controller="Ctrl">
    <profile updateFromDirective="updateFromController"></profile>
    <button ng-click="updateFromController()">Update</button>
</div>

Answer 1

如果您像这样传递 updateFromController()，则使用 '&' 将您的函数引用传递给指令，否则使用 '=' 作为 updateFromController（两者都可以）

现在你的情况

注意： 我假设你不想使用 $scope 因为你在控制器中有你的函数

要从指令中调用控制器函数，您需要将其作为回调传递并可以像下面那样调用该回调

angular.module('app',[])
.controller('Ctrl', function(){
    this.updateFromController = function(){
         alert('In Contrller')
    };
}).directive('profile',function(){
   return{
    scope:{
      controllercallback: "&"
    },
    template:'<input ng-model="name"/><br/><button ng-click="ctrl.updateFromDirective()">Update</button>',
    controller:function(){
      this.updateFromDirective=function(){
        alert('In Directive')
        this.controllercallback();
      }
    },
    bindToController: true,
    controllerAs:'ctrl'
  }

})

您的html应该如下所示

 <div ng-controller="Ctrl as vm">
 <profile controllercallback="vm.updateFromController()"></profile>

但这里您的按钮在指令本身中。

如果您不希望按钮成为指令的一部分，您可以使用 angular 给出的 publish/subscriber 模型，如下所示

angular.module('app',[])
.controller('Ctrl', function($scope){
    this.updateFromController = function(){
         $scope.broadcast('calldirective');
    };
}).directive('profile',function(){
   return{
    template:'<input ng-model="name"/>',
    controller:function($scope){
       $scope.$on('calldirective', function() {
         alert('In Directive')
       }); 

    }



}

})

将指令操作绑定到父控制器 AngularJS

bind directive action to parent controller AngularJS

data-binding

angularjs

isolate-scope