Question

我有一个指令，它由一个表单文本元素和一个继续按钮以及相关的控制器等组成。该指令将用于大约5个不同的页面，但是在每个页面上使用它的继续按钮会做不同的东西。

我的问题是，如果为每个页面执行不同的操作，我可以/应该将继续按钮的代码放在哪里？

由于它是一个指令，我不能简单地将一个不同的函数传递给ng-click，具体取决于我在哪个页面上（即，如果我只是复制每个页面上的代码，我可以简单地更改在ng-click上调用的函数并在每个页面控制器中都有该功能。

希望我对我的问题不要太模糊，你可以理解我的要求。如果不是这么说，那就试着更详细地解释一下。

我真的很感激这方面的一些指导。

感谢。

Answer 1

有两种方法可以做到。如果要将指令创建为真正的组件，则可以使用带有绑定到表达式的&绑定的隔离范围。假设您的指令看起来像

<div do-work on-click="save()"></div>

和生成的html

<div>
   <input ...> 
   <button ng-click="doAction()"><button>
</div>

将定义指令范围

scope:{
   onClick:'&'
}

在你的指令控制器或链接函数中，你需要实现按钮doAction，它依次评估onClick动作

scope.doAction=function() {
   scope.onClick({//if params are required});
}

现在，您已通过直接onClick引用链接父级。这里要记住的一件事是，这会创建一个具有隔离范围的指令。

如果您不想创建隔离范围，则需要使用

scope.$eval(attr.onClick); // this evaluates the expression on the current scope.

希望这会有所帮助。

Answer 2

理想情况下，您不应创建不可重复使用的指令。

在你的情况下，你可以像下面这样做 -

在指令
添加要调用的函数，并将页面/页面ID作为参数传递
根据参数

<强>指令

＆＃13;

myApp.directive('someDirecive', function () {  
    return {
        // restrict options are EACM. we want to use it like an attribute
        restrict: 'A',
        // template : <inline template string>
        // templateUrl = path to directive template.
        // templateUrl: '',
        scope: {
            onButtonClick : '&'
        },
        controller: function ($scope, $element, $attrs, $transclude) {
	
			$scope.onButtonClick = function(pageId) {
				if (pageId == 1) {
					// do something
				}
				else if (pageId == 2) {
					// do something
				}
			}
		
        },
		
        //link: function (scope, iElement, iAttrs) {
        //}

    };
});

＆＃13;

<强> HTML

＆＃13;

<div some-directive on-button-click="DoSomething(1)" />

＆＃13;

需要通用指令ng-click指导

2 个答案: