在自定義指令的作用域綁定中使用符號'@'，'＆'，'='和'>'AngularJS

我已經閱讀了很多關於在AngularJS中實現自定義指令時使用這些符號的知識，我仍然不清楚。我的意思是，如果我在自定義指令中使用某個範圍值，這意味着什麼？在自定義指令的作用域綁定中使用符號'@'，'＆'，'='和'>'AngularJS

var mainApp = angular.module("mainApp", []); 
 
mainApp.directive('modalView',function(){ 
 
    return{ 
 
    restrict:'E', 
 
    scope:'@' OR scope:'&' OR scope:'=' OR scope:'>' OR scope:true 
 
    } 
 
});

究竟什麼是我們這裏的範圍做什麼？

我也不確定「scope：'>'」是否存在於官方文檔中。它已用於我的項目。

編輯-1

採用「範圍： '>'」在我的項目是一個問題，這已得到修復。

來源

2016-06-14 MAC

在AngularJS指令中，範圍允許您訪問應用指令的元素的屬性中的數據。

這被示出最好的一個例子：

<div my-customer name="Customer XYZ"></div>

和該指令定義：

angular.module('myModule', []) 
.directive('myCustomer', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     customerName: '@name' 
    }, 
    controllerAs: 'vm', 
    bindToController: true, 
    controller: ['$http', function($http) { 
     var vm = this; 

     vm.doStuff = function(pane) { 
     console.log(vm.customerName); 
     }; 
    }], 
    link: function(scope, element, attrs) { 
     console.log(scope.customerName); 
    } 
    }; 
});

當scope屬性用於該指令是在所謂的「分離範圍」模式，這意味着它不能直接訪問父控制器的範圍。

簡單來說，結合符號的含義是：

someObject: '='（雙向數據綁定）

someString: '@'

（直接或通過與雙花括號符號 {{}}插值通過）

someExpression: '&'（例如，hideDialog()）

該信息存在於AngularJS directive documentation page中，儘管在整個頁面中有所擴展。

符號>不是語法的一部分。

但是，<確實存在作爲AngularJS component bindings的一部分，並且意味着單向綁定。

來源

2016-06-14 18:02:04 VRPF

什麼'@'？ – Homer

值得注意的是，'<'不僅與1.5中的組件兼容，而且與指令兼容。 @Homer''''表示屬性爲[可選]（https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object）。 –

112

>不在文檔中。

<用於單向綁定。

@綁定是爲了傳遞字符串。這些字符串支持內插值的{{}}表達式。

=綁定是用於雙向模型綁定。父範圍中的模型與指令的隔離範圍中的模型鏈接。

&綁定是將方法傳遞到您的指令的作用域，以便它可以在您的指令中調用。

當我們在指令中設置範圍：true時，Angular js將爲該指令創建一個新的範圍。這意味着對指令作用域所做的任何更改都不會反映到父控制器中。

來源

2016-06-14 17:46:27 Aravind

AngularJS documentation on directives寫得很好，符號的含義。

需要明確的是，你不能只是有

scope: '@'

在指令定義

。您必須具有適用於這些綁定的屬性，如下所示：

scope: { 
    myProperty: '@' 
}

我強烈建議您閱讀網站上的文檔和教程。您需要了解更多有關隔離範圍和其他主題的信息。

這裏是從上述鏈接的頁面直接引用，關於scope的值：

範圍屬性可以是真實的，一個對象或一個falsy值：

falsy：將不會爲該指令創建範圍。該指令將使用其父級的範圍。

true：將爲該指令的元素創建一個新的子範圍，該範圍從其父級原型繼承。如果同一元素上的多個指令請求新範圍，則只創建一個新範圍。新的作用域規則不適用於模板的根，因爲模板的根始終會獲得新的作用域。

{...}（對象散列）：爲指令的元素創建了一個新的「隔離」作用域。 'isolate'範圍與正常範圍不同，因爲它不會從其父範圍原型繼承。這在創建可重用組件時非常有用，它不應該意外讀取或修改父範圍中的數據。

^{取自https://code.angularjs.org/1.4.11/docs/api/ng/service/ 2017年2月13日$＃編譯-scope-，當我們創建一個客戶指令許可爲CC-by-SA 3.0}

來源

2016-06-14 18:07:36

，該指令的範圍可以在隔離範圍這意味着指令不與控制器共享一個範圍;指令和控制器都有自己的範圍。但是，數據可以通過三種可能的方式傳遞給指令範圍。

數據可以使用@字符串字面值，傳遞字符串值，單向綁定作爲字符串傳遞。
數據可以使用=字符串文字，傳遞對象，2種方式綁定作爲對象傳遞。
數據可以作爲函數傳遞，&字符串文字，調用外部函數，可以將數據從指令傳遞到控制器。

來源

2016-10-01 16:41:48

<：單向綁定

=：雙向綁定

&：功能結合

@：只傳遞字符串

來源

2017-09-03 09:58:02

重複相同的答案沒有意義，抱歉不是相同的答案它似乎是從上述答案中提取的信息。 – MAC

有時較短的答案往往更實際！ –

如果你可以在短短的幾行內解釋它，不需要添加垃圾信息:) –

在自定義指令的作用域綁定中使用符號'@'，'＆'，'='和'>'AngularJS

回答

相關問題