Question

我创建了以下指令：

app.directive('myActivity', function() {
        return {
            restrict: "A",
            template: "<div class='activity-mask' data-ng-show='loading!=0'>" +
                       "<span>Loading... {{ loading }}</span>" + 
                       "</div>" +
                       "<div class='activity-mask' data-ng-show='fetching!=0'>" +
                       "<span>Fetching... {{ fetching }}</span>" +
                       "</div>"
        };
});

该指令似乎没有注意到$ scope。如何传入范围以便我可以看到$ scope.fetching和$ scope.loading的值？

Answer 1

将隔离范围与@一起使用，因为您希望将只读值传递给指令：

app.directive('myActivity', function() {
    return {
        restrict: "A",
        scope:{
            loading:"@",
            fetching:"@"
        },
        template: '<div>...</div>'
    };
});

HTML：

<div my-activity loading="{{loading}}" fetching="{{fetching}}"></div>

这种方法是安全的，不会污染父范围： Fiddle

但是，如果您希望指令共享父级的范围，那么这是一个演示小提琴： Fiddle

另一种安全的方法是创建一个二维绑定：

app.directive('myActivity', function() {
        return {
            restrict: "A",
            scope:{
                loading : "=",
                fetching : "=",
            },
            template: '<div>...</div>'
        };
});

HTML：

<div my-activity loading="loading" fetching="fetching"...

如何将范围传递给指令？

1 个答案: