如何處理有多個指令的元素

如果一個元素有多個指令，一個是scope:false，一個是scope:true，另一個是scope:{}，那麼角度如何處理這個元素？如何處理有多個指令的元素

2015-06-10 劉晚林

如果包括所有的三個指令，要求在相同的元素全部三個作用域選項，你會得到一個錯誤。 true和false兼容並使用相同的範圍，但加入{}原因：

Error: [$compile:multidir] Multiple directives [isolatedScope, trueScope] 
asking for new/isolated scope on: 
<div false-scope="" true-scope="" isolated-scope="">

在這種情況下，true和{}衝突時true嘗試創建一個新的，繼承範圍和{}嘗試創建一個新的，孤立的範圍，這是合理的，也許是預期的。 $compile docs說：

如果同一元素上的多個指令請求新範圍，則只會創建一個新範圍。

如果你有多個scope: true指令，他們很好，你會得到不止一個，而是scope: {}詢問了不同類型的和角度不能同時生產。指令可以用priority來聲明，所以他們可以悄悄選出一個勝利者，但這會導致各種各樣的驚喜，所以他們明智地決定大聲呼喊。

這裏是a Plunker展示它。我將所有三個範圍放在一個單獨的div上，然後使用父範圍中可用的數據在每個範圍內聲明數據。如果您註釋掉了scope: {}，它可以正常工作，並且您可以看到false和true範圍共享。我沒有調查是否贏得了false或true，但我懷疑true，因爲它表明$compile需要一個新的範圍。

HTML：

<body ng-controller="MainCtrl"> 
    <div false-scope true-scope isolated-scope> 
    <b>False directive</b> 
    <ul> 
     <li>Loaded: {{ falseDirectiveLoaded }}</li> 
     <li>Data: {{ falseDirectiveData }}</li> 
    </ul> 
    <b>True directive</b> 
    <ul> 
     <li>Loaded: {{ trueDirectiveLoaded }}</li> 
     <li>Data: {{ trueDirectiveData }}</li> 
    </ul> 
    <b>Isolated directive</b> 
    <ul> 
     <li>Loaded: {{ isolatedDirectiveLoaded }}</li> 
     <li>Data: {{ isolatedDirectiveData }}</li> 
    </ul> 
    </div> 
</body>

JS：

app.controller('MainCtrl', function($scope) { 
    $scope.one = 1; 
    $scope.two = 2; 
    $scope.three = 3; 
}); 

app.directive('falseScope', function() { 
    return { 
    restrict: 'A', 
    scope: false, 
    link: function(scope, element) { 
     scope.falseDirectiveLoaded = true; 
     scope.falseDirectiveData = [scope.one, scope.two, scope.three]; 
    } 
    } 
}); 

app.directive('trueScope', function() { 
    return { 
    restrict: 'A', 
    scope: true, 
    link: function(scope, element) { 
     scope.trueDirectiveLoaded = true; 
     scope.trueDirectiveData = [scope.one, scope.two, scope.three]; 
    } 
    } 
}); 

app.directive('isolatedScope', function() { 
    return { 
    restrict: 'A', 
    scope: {}, 
    link: function(scope, element) { 
     scope.isolatedDirectiveLoaded = true; 
     scope.isolatedDirectiveData = [scope.one, scope.two, scope.three]; 
    } 
    } 
});

來源

2015-06-10 15:02:45

由於JS使用duck typing，作用域可以接收任何類型的值，儘管它們可能會過濾接受的角度。

考慮到這一點，當角度接收範圍，我猜0123,，並威脅它的一致性。

布爾：讓你控制，如果範圍將被繼承
對象*：讓你添加綁定到該指令
別人的「新禮儀」：我不知道如何角的行爲，如果任何其他類型的，作爲一個字符串，傳遞

*我想它只接受JSON

來源

2015-06-10 14:43:09 MVCDS

如何處理有多個指令的元素

回答

相關問題