在具有不同控制器的视图中使用ng-click和指令函数

using ng-click with a directive function inside a view with a different controller

本文关键字：ng-click 函数 指令 视图 控制器      更新时间：2023-09-26

我有这个html:

<button ng-click="reset()">
<div ng-controller="anotherController" class="container">
  <directive data="{{ datafordirective }}"></directive>
</div>

指令：

app.directive('directive', function(){
   return {
    restrict: 'AE',
    scope:{ data: '=', someAction: '=', reset: '='},
    link: function(scope, element, attrs){
     scope.reset = function(){
        //reset dataset
     };  
  }
};
});

我在指令中的链接函数中有一个函数来重置数据，但问题是，我使用此按钮的视图和此指令有一个不同的控制器，但指令和此视图控制器都属于同一个应用程序模块（'appname'，[]）。。。

有办法做到这一点吗？在指令范围之外使用scope.reset（）函数？

谢谢！

有很多方法可以做到这一点。我将举几个例子：

1.简单（非理想）的

访问指令中的父作用域：

代替：

scope.reset = function() {};

用途：

scope.$parent.reset = function() {};

但是，从子作用域中修改父作用域并不是一个好的做法。这可能会导致对范围继承工作方式的混淆（AngularJS中范围原型/原型继承的细微差别是什么？）。此外，国际海事组织认为，这不是一个很好的概括。

2.一种（稍微）更好的方法

<button ng-click="buttonClicked = true">
<div ng-controller="anotherController" class="container">
  <directive data="{{ datafordirective }}" reset="buttonClicked" reset-callback="buttonClicked = false"></directive>
</div>

在这里，我们使用父作用域（buttonClicked）中的一个属性来通过元素上的属性控制指令。

app.directive('directive', function(){
   return {
    restrict: 'AE',
    scope:{ data: '=', resetCallback: '&', reset: '='},
    link: function(scope, element, attrs){
     scope.$watch('reset', function(val) {
       if (val) {
         // reset dataset
         scope.resetCallback();
       }
     });
  }
};

该指令将buttonClicked的值绑定到reset，然后监视该值的更改，并在更改时重置数据集。

3.另一种更好的方法

创建一个服务来处理数据集上的操作。

app.service('dataset', function() {
  this.reset = function() {
    // reset dataset
  };
});

然后，在父控制器的某个位置，您需要注入dataset服务并创建一个函数来调用dataset.reset:

$scope.reset = function() {
  dataset.reset();
};
相关文章：