Question

我的工具提示指令包括：

<div class="wrapper" ng-repeat="item in items">
    <span tooltip="item.description" tooltip-model="item.display" tooltip-border="item.color" tooltip-enable="!!item.description">
        <span>{{$parent.item.label}} - {{$parent.item.display}}</span>
    </span>
</div>

问题是，如果我想从模型中引用$parent，我需要使用item。有没有办法让它在$parent下工作？

我的指令代码看起来像这样（我使用Angular UI bootsrap tooltip作为参考，但我不知道为什么它使用$ eval和$ observe，如果它可以在范围内绑定=的属性，它使用隔离范围，因为它对属性使用true）

.directive('tooltip', ['$compile', function($compile) {
    var template = '<div class="description-popup" ng-style="{borderColor: color}" ng-class="{top:!bottom,bottom:bottom}">' +
                      '<p>{{content}}</p>' +
                      '<span class="close icon-cancel-1"></span>' +
                      '<span class="arrow" ng-style="{borderColor: color}"></span>' +
                   '</div>';
    return {
        scope: {
            color: '=tooltipBorder',
            enable: '=tooltipEnable',
            content: '=tooltip',
            model: '=tooltipModel'
        },
        compile: function(element, attrs) {
            var linkerFn = $compile(template);
            return function link(scope, element, attrs) {
                var tooltip = linkerFn(scope, function(){});
                element.after(tooltip);

                ...

            };
        }
    };
}]);

我使用Angular 1.0.6，因此隔离范围以不同的方式工作。范围不会从父母那里继承。

Answer 1

也可以传递项目对象：

   scope: {
        color: '=tooltipBorder',
        enable: '=tooltipEnable',
        content: '=tooltip',
        model: '=tooltipModel',
        item: '='
    }

<span item='item'>

出于好奇，你为什么使用1.0.6？

角度范围问题

1 个答案: