在指令Transcluding NG-点击 [英] Transcluding ng-click in a directive

问题描述

我建立一个AngularJS指令。我想该指令来包装它有它内部的NG-点击其他内容。点击时所产生的按钮不会做任何事情。
这里是code，我试过一个简化版本：

I am building an AngularJS directive. I want that directive to wrap other contents which have an ng-click inside of it. The resulting button does not do anything when clicked. Here is a simplified version of the code which I tried:

（HTML）

<div ng-app="someapp">
    <div ng-controller="Ctrl1">
        <h2>Example</h2>
        <my-dir data-x="1">
            <button ng-click="refresh()" id="refresh1">Refresh</button>
        </my-dir>
        <my-dir data-x="2">
            <button ng-click="refresh()" id="refresh2">Refresh</button>
        </my-dir>
    </div>
</div>

（JavaScript的）

(JavaScript)

var app = angular.module('someapp', []);

app.controller('Ctrl1', function($scope){ });

app.directive('myDir', function(){
    return {
        restrict: 'E',
        scope: {},
        template: '<div><p>Directive contents:</p><div ng-transclude></div></div>',
        transclude: true,
        link: function(scope, element, attrs){
            $scope.y = attrs.x+1;
            scope.refresh = function(){
                console.log("Refresh Called, y = ", $scope.y);
            }
        }
    };
});

我

怎样才能改变它，使按钮实际上是触发$ scope.refresh（）函数？

How can I change it so that the button actually triggers the $scope.refresh() function?

额外澄清：

我需要本地对象信息指令（可以有多个该指令在单控制器），所以我创建了一个新的范围。

I need local object information for the directive (there can be multiple of this directive in the single controller), so I create a new scope.

推荐答案

为D $ C $输入csmith指出，transcluded NG-点击将被绑定到控制器的范围，而不是指令的。根据正是你想做的事，你不妨为这是行为（因为transcluded内容不是指令的一部分，它为什么要调用指令的范围的方法？）。就个人而言，我会申报控制器的范围，而不是方法。

As dcodesmith points out, the transcluded ng-click will be bound to the controller's scope rather than the directive's. Depending on what exactly you want to do, you may wish for this to be the behavior (since the transcluded content is not part of the directive, why should it call a method of the directive's scope?). Personally, I would declare the method on the controller's scope instead.

app.controller('Ctrl1', function($scope){ 
    $scope.refresh = function() {
        console.log("Refresh called.");
    };
});

在这种情况下，你的指令的应的声明隔离范围，即使有什么也没有。

In this case, your directive should declare the isolate scope, even if there is nothing in it.

更新：基于您的评论，为什么不包括在指令模板中的按钮？在这种情况下，将已经与正确的范围相关联。

Update: Based on your comment, why not just include the button in the directive template? In this case, it will already be associated with the correct scope.

如果有，你不会需要刷新按钮某些情况下，则是公开通过该指令作为一个属性选项：

If there are some situations that you will not need the refresh button, then expose that as an option through the directive as an attribute:

<my-dir show-button='true'></my-dir>

// directive scope
scope: {
    showButton: '='
} 

我有这种方法的最大问题是采用双向结合操作符（=），使真与假被视为前pressions。我只是不喜欢那感觉非常。

The biggest problem that I have with this approach is using the "two-way-binding" operator (=) to cause 'true' and 'false' to be treated as expressions. I just don't like the feel of that very much.

不管怎样，希望这能解决您的问题...
还有一个评论，我说这甚至不知道，如果你要实现的实际上是一个刷新按钮，但如果是这样，我会花一分钟，并考虑是否真的需要一个刷新按钮。角擅长于消除刷新按钮！

Anyway, hopefully this solves your problem... One more comment, and I'm saying this not even knowing if what you are implementing is actually a refresh button, but if it is, I would take a minute and consider whether you really need a "refresh" button. Angular excels at eliminating refresh button!

更新2：

我创建了一个plunkr，显示我怎么想，我会处理你的情况，尤其是如果有任何其他控件被重用：

I've created a plunkr that shows how I think I would handle your situation, especially if any of the miscellaneous controls are reused:

http://plnkr.co/edit/FhrSwcrSZScvCfhtCSjn

在这个例子中，这两个按钮指令是有效的录像机指令的孩子。他们的逻辑被包含在该指令中，但它们分别实例化，并且不需要用于父指令进行操作。 父指令（videplayer）只是公开API的孩子来使用。也没有父的方法构造，而不是范围的方法。我觉得这是很奇怪的，但它是从角恰好文件执行：

In this example, the two button directives are effectively children of the "videoPlayer" directive. Their logic is contained within that directive, but they are instantiated separately, and not required for the parent directive to operate. The "parent directive" (videplayer) simply exposes the API for the "children" to use. Also not that the methods of the parent are methods of the constructor, not the scope. I think this is very strange, but it is taken exactly from the angular documentation:

http://docs.angularjs.org/guide/directive （在最后一个例子页）

http://docs.angularjs.org/guide/directive (last example on the page)

请注意，每个录像机指令仍会有它自己的范围内分离

Note that each videoPlayer directive will still have it's own isolate scope.

这篇关于在指令Transcluding NG-点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！