Angularjs 如何在angular js中通过指令声明传递函数名?

Angularjs 如何在angular js中通过指令声明传递函数名?,angularjs,Angularjs,我使用的是AngularJS。我创建了一个指令,如下所示 HTML 我需要一种方法将save和cancel函数的名称发送到指令,然后在下面输入按钮的数据中使用这些名称 这是因为我可以将此指令用于多个控制器 模板 <template-holder> <name></name> <input type="button" value="save" data-ng-click

我使用的是AngularJS。我创建了一个指令,如下所示

HTML

我需要一种方法将save和cancel函数的名称发送到指令,然后在下面输入按钮的
数据中使用这些名称

这是因为我可以将此指令用于多个控制器

模板

<template-holder>
    <name></name>
    <input 
           type="button" 
           value="save" 
           data-ng-click="use-the-function-name-defined-in-the-html-of-controller" 
    />
</template-holder>


我不确定这是否可能。任何帮助都将不胜感激。

您可以使用隔离作用域将指令作用域函数绑定到父控制器作用域函数

我写了一个简单的例子(),你可以试试

HTML

控制器1:
控制器2:
JS

angular.module(“myApp”,[])
.控制器(“ctrl1”,功能($scope){
$scope.changeAbc=函数(){
警报(“正在调用Controller1中的函数:changeAbc”);
}
$scope.saveAbc=函数(){
警报(“正在调用Controller1中的函数:saveAbc”);
}
})
.控制器(“ctrl2”,功能($scope){
$scope.changeXyz=函数(){
警报(“正在调用Controller2中的函数:changeXyz”);
}
$scope.saveXyz=函数(){
警报(“正在调用Controller2中的函数:saveXyz”);
}
}).
指令(“myDirective”,function(){
返回{
限制:“A”,
模板:“”,
替换:正确,
范围:{
changeFunction:“=”,
保存函数:“=”
}
};
});

您需要这样声明控制器中的方法吗?我认为您的指令知道该范围:@Jorg我将使用不同的控制器重用该指令,并且每个控制器在其范围内的示例中可能没有相同的对象,如
customer
。如果您使用隔离范围。还有一些关于这个问题的其他想法值得一看。太好了!只是知道我需要。。。在我检查你的答案之前,我在这里遇到了这篇漂亮的文章。无论如何,谢谢你:)
angular.module('folderSettingApp')
    .directive('myDirective', function () {
        return {
            restrict: 'A'
            , templateUrl: '/Scripts/App/Templates/Template.htm'
            , replace: true
            , link: function ($scope, element, attrs) {
                attrs.$observe('templatename', function (value) {
                    element.find('name').text(value);
                });
            }
        };
    });
<template-holder>
    <name></name>
    <input 
           type="button" 
           value="save" 
           data-ng-click="use-the-function-name-defined-in-the-html-of-controller" 
    />
</template-holder>
<h1>Controller 1:</h1>
<div ng-controller="ctrl1">
  <div data-my-directive="" data-save-function="saveAbc"></div>
</div>
<h1>Controller 2:</h1>
<div ng-controller="ctrl2">
    <div data-my-directive="" data-save-function="saveXyz"></div>
</div>
angular.module("myApp",[])
.controller("ctrl1",function($scope){
  $scope.changeAbc = function(){
    alert("function: changeAbc in Controller1 is being invoked");
  }
  $scope.saveAbc = function(){
    alert("function: saveAbc in Controller1 is being invoked");
  }
})
.controller("ctrl2",function($scope){
  $scope.changeXyz = function(){
    alert("function: changeXyz in Controller2 is being invoked");
  }
  $scope.saveXyz = function(){
    alert("function: saveXyz in Controller2 is being invoked");
  }
}).
directive("myDirective",function(){
  return {
        restrict: 'A', 
        template: '<input type="button" value="save" data-ng-click="saveFunction()"/>',
        replace: true,
        scope:{
            changeFunction:"=",
            saveFunction:"="
        }
    };
});