在不同的attr中定义的指令attr内的回调函数。

13 浏览
0 Comments

在不同的attr中定义的指令attr内的回调函数。

所以我有一个名为say的指令,叫做mySave,它基本上就是这样的:

app.directive('mySave', function($http) {
   return function(scope, element, attrs) {
      element.bind("click", function() {
          $http.post('/save', scope.data).success(returnedData) {
              // 在这里定义的回调函数
              // 用户在my-save-callback中定义的回调函数,可能是from my-save-callback?
          }
      });
   }
});

元素本身看起来是这样的:


callbackFunctionInController目前只是这样的:

$scope.callbackFunctionInController = function() {
    alert("回调");
}

当我在my-save指令中的console.log() attrs.mySaveCallback时,它只给了我一个字符串callbackFunctionInController(),我在某个地方读到说我应该解析它,然后就好了,所以我尝试了$parse(attrs.mySaveCallback),它给我返回了一些函数,但并不是我在找的那个,它给我返回了

function (a,b){return m(a,b)}

我做错了什么?这种方法从一开始就是错误的吗?

0
0 Comments

Callback function inside directive attr defined in different attr这个问题的出现的原因是由于在指令属性中定义的回调函数与另一个属性中的回调函数不一致,导致无法正确执行回调函数。解决方法是使用$parse将指令属性中的回调函数转换为可执行的表达式,并在需要执行回调函数的地方调用它。

在解决这个问题之前,首先需要了解的是$http.post()函数会在模板引擎渲染出DOM元素后立即调用,并且仅在此时调用。如果将它放在一个重复指令中,那么每个重复项都会进行一次调用,这显然不是我们想要的结果。如果确实需要这样的行为,那么说明设计不正确,因为DOM的存在不应该决定后台查询。

接下来,我们可以使用$parse来解析指令属性中的回调函数,并将其转换为可执行的表达式。$parse函数会返回一个评估表达式,当我们将作用域传递给它进行评估时,它会返回传递的作用域上该表达式的当前状态,这样我们就可以执行回调函数了。同时,$parse还可以用于引用要赋值的模型,而不仅仅是读取模型的值。

如果想要执行从$parse返回的函数,可以使用callback.apply();callback.call();或者callback();等形式。但在使用$parse之前,我们需要在link函数中进行一些设置,比如在click回调中调用$parse返回的函数。

另外,我们还可以使用$scope.$eval(attrs.mySave)来执行指令属性中的回调函数。

总之,解决这个问题的方法有两种:一种是使用$parse将回调函数转换为可执行的表达式并调用它,另一种是使用$scope.$eval(attrs.mySave)直接执行回调函数。在link函数中进行相应的设置,确保回调函数能够正确执行。

以上就是解决Callback function inside directive attr defined in different attr问题的原因和解决方法的内容。

0
0 Comments

在上面的代码中,我们可以看到有两种不同的方式来定义指令中的回调函数。第一种方式是通过在指令的attrs中定义一个回调函数,并在需要的地方通过scope.$eval(attrs.mySaveCallback)来调用它。第二种方式是通过指令的scope属性中使用"&"来定义一个回调函数,并直接在需要的地方通过scope.callback()来调用它。

在第一种方式中,回调函数是通过在指令的attrs中定义一个字符串来传递的。在调用时,我们使用scope.$eval(attrs.mySaveCallback)来执行这个字符串,从而执行回调函数。这种方式的好处是可以在调用时传递参数,例如scope.$eval(attrs.mySaveCallback(parameters))。但是需要注意的是,如果在调用时没有传递参数,那么回调函数将不会接收到任何参数。

在第二种方式中,回调函数是通过在指令的scope属性中使用"&"来定义的。这种方式的好处是可以直接在调用时传递参数,例如scope.callback(parameters)。但是需要注意的是,在定义回调函数时需要使用$parse服务来解析字符串,并将其转换为实际的函数。

对于上面代码中的问题,如果要将返回的数据传递给mySaveCallback回调函数,可以在调用时将返回的数据作为参数传递进去,例如scope.callback(returnedData)。这样,在回调函数中就可以通过参数来获取返回的数据了。

总结起来,根据需要选择不同的方式来定义指令中的回调函数。如果需要在调用时传递参数,可以使用第一种方式;如果不需要传递参数,可以使用第二种方式。在调用回调函数时,需要注意传递正确的参数,以便在回调函数中正确地获取数据。

0
0 Comments

问题的原因是在指令的属性中定义的回调函数无法在不同的属性中使用。解决方法是使用隔离作用域,并通过命名参数将参数传回控制器。

在指令中使用隔离作用域的方式是在指令定义中添加"scope"属性,并将回调函数定义为命名参数。例如:

app.directive('mySave', function($http) {
   return {
      scope: {
        callback: '&mySaveCallback'
      }
      link: function(scope, element, attrs) {
        element.on("click", function() {
            $http.post('/save', scope.$parent.data).success(returnedData) {
                scope.callback({result: returnedData}); // 通过命名参数将参数传回控制器
            }
        });
      }
   }
});

使用指令时,可以将参数传递给回调函数。例如:


这样,当按钮被点击时,回调函数将被调用,并且在控制器中可以使用传递的参数。

这种解决方法避免了在指令中使用两向绑定的方式,因为有时候我们不想为只在回调函数中使用的值添加额外的作用域属性。

在文档中没有明确说明这个问题的解决方法,但是使用隔离作用域和命名参数是一种常见的解决方案。

总结一下,问题的原因是指令属性中定义的回调函数无法在不同的属性中使用。解决方法是使用隔离作用域,并通过命名参数将参数传回控制器。这种解决方法避免了使用两向绑定,并且可以使指令具有更高的可重用性。

0