0

我有一个锚标签，我希望根据模型中的值隐藏或显示。

<table>
    <tr ng-repeat="item in items">
        <td>Other Stuff</td>
        <td>
            <a href="#/somewhere" ng-show="model.showIt" myCustomDir="some value" onClick="bar(item)" />
        </td>
    </tr>
</table>

现在在我的指令中，我有以下内容：

app.directive('myCustomDir', function() {
    var def = {
        restrict: 'A',
        scope: {
            onClick: "&"
        },
        link: function(scope, element, attrs) {

            var hover = angular.element("<div><b>Some Text</b></div>");
            var button = hover.find('b');

            button.on('click', function() {
               scope.$apply(function() {
                   scope.onClick();
               })
            });
        }
    };

    return def;
})

问题是，一旦我包含我的指令，我认为 ng-show 就不再起作用了，那是因为如果我是正确的，那是因为我的指令在隔离范围内工作，因此来自父范围的模型不再存在。

如何让我的指令与 ng-show 很好地配合使用，同时仍然能够让某人在单击标签时调用他们想要调用的方法。

Plunker 适合所有感兴趣的人。http://plnkr.co/edit/BLMCgB

4

2 回答 2

2

您的指令创建了一个隔离范围。所以需要使用$parent来获取当前repeater item的值

ng-show="$parent.item.visible"

如果您想让它更通用，您可以关闭范围以使其与其他指令兼容。然后就可以scope.$eval用来调用传入的函数了。

myApp.directive('myDirective', function ($document) {
    var definition = {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {

                ...

                button.on('click', function () {
                    scope.$apply(function () {
                        scope.$eval(attrs.onClick);
                        hover.remove();
                    })
                });
            });
        }
    }

    return definition;
})
于 2013-09-13T14:06:09.090 回答
0

如果你想允许任何全局指令 - 不要声明私有范围。
如果您只想允许几个指令，请在范围声明中添加链接：

scope: {
            onClick: "&",
            ngShow : "&"
        },

在评论中回答您的问题：
在指令中声明控制器并在此控制器中声明方法。然后在指令模板中将 ng-click 分配给此方法。

var def = {
  restrict: 'A',
  controller: function($scope){
    $scope.callMe = function(){
      console.log('foo');
    }
  }
}

在模板中：

<div ng-click="callMe()">content</div>

此方法只能在您的指令内访问。

于 2013-09-13T12:31:14.850 回答