Question

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

<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很好地配合，同时仍然能够让某人在点击标签时想要调用哪种方法。

对于所有感兴趣的人来说。 http://plnkr.co/edit/BLMCgB

Answer 1

您指令创建一个隔离的范围。因此，您需要使用$parent来获取当前转发器项的值

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;
})

Answer 2

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

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

评论中的问题：
在指令中声明控制器并在此控制器中声明方法。然后在指令模板中指定ng-单击此方法。

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

模板中的

：

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

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

在使用隔离范围并且仍然能够调用范围中的方法时，如何不覆盖其他角度指令？

2 个答案: