如何在角度指令中訪問隔離的'this'作用域？

Question

如果我使用$範圍，該指令完美的作品：

function alertBox(){ 
    return { 
    template: 
     '<div ng-show="alert" class="alert alert-{{alert.type}}" style="text-align: center;">\ 
     <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">x</a>\ 
     <span ng-bind-html="alert.message | safe_html"></span>\ 
     </div>' 
    } 
} 

警報是在我的控制器定義爲：

$scope.alert = {message: 'test!', type: 'danger'}; 

而且我簡單的觀點：

<div alert-box></div> 

然而，我不使用$ scope，而是使用'this'定義我的警報：

this.alert = {message: 'test!', type: 'danger'}; 

但無論我嘗試什麼，我都無法弄清楚如何在指令中注入'this'的值。

理想我想能夠引用「self.alert」什麼的，所以我沒有將其定義爲一個屬性範圍的情況下，但假設我這樣做，我已經試過這種變化無濟於事：

function alertBox(){ 
    return { 
     scope: { 
      scope: '=scope' 
     }, 
     template: '<div ng-show="' + scope + '.alert" class="alert alert-' + scope + '.type" style="text-align: center;"><a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">x</a>  <span ng-bind-html="' + scope + '.message | safe_html"></span></div>' 
    } 
} 

而且我的html：

<div alert-box scope="welcome"></div> 

在那個例子我有'WelcomeController as welcome'定義。

任何幫助表示讚賞。

Answer 1

這裏有幾個誤解問題。

第一個，帶有自己模板的指令通常使用隔離的範圍，這樣模板的操作範圍與指令操作的範圍不同。這就是使指令可重用的原因。

在您的原始示例中，該指令使用父作用域（隱式爲scope: false），而不是隔離作用域（scope: {}）。

第二個，您試圖使用「控制器爲」方法並將您的alert對象定義爲控制器實例的屬性。控制器實例（您稱爲this）然後在您的示例中的控制器別名 - welcome下發布。所以，而不是{{alert.message}}，你需要使用{{welcome.alert.message}}。這就是「控制器」所​​做的一切 - 將「this」（即控制器實例對象）設置爲$scope.<alias>。所以（並且仍然），與我的第一點相同的範圍原則適用。

===

爲了使你的榜樣工作，創建具有分離範圍的指令，並通過屬性綁定綁定的對象alert。

這裏的規範（儘管浪費，見下文）的方式，這是做：

.directive("alertBox", function(){ 
    return { 
    scope: { 
     alert: "=" 
    }, 
    template: '<div ng-show="alert" class="alert-{{alert.type}}">{{alert.message}}</div>' 
    }; 
}) 

用法：

<div ng-controller="WelcomeController as welcome"> 
    <div alert-box alert="welcome.alert"></div> 
</div> 

// in WelcomeController 
this.alert = {message: 'test!', type: 'danger'}; 

該指令的模板不會受到影響通過如何在範圍中設置傳入的alert對象。

獎金部分

那麼，爲什麼浪費了？

"="作用域綁定創建了一個雙向綁定，這在此可能不必要，因爲預期指令alertBox不會修改父對象上的alert對象。雙向綁定設置2美元的觀察者，其中一個未使用，因此浪費。

相反，您可以使用"&"單向綁定到表達式。 "&"給出了需要被調用，以獲得通過綁定表達式（而不是直接在物體與"="）返回的對象的功能，所以該指令的模板略有改變爲：

scope: { 
    alert: "&", 
}, 
template: '<div ng-show="alert()" class="alert-{{alert().type}}">{{alert().message}}</div>' 

Answer 2

bindToController：您可使用當與範圍指令隔離設置爲true，組件屬性綁定到controller而非scope bindToController屬性，這使得它可在this。

通常，當使用controller as語法時，您會這樣做。

var myapp = angular.module('myapp', []); 

myapp.controller('MainCtrl', function() { 
    this.name = "Vinoth Babu"; 
}); 

myapp.directive('alertBox', function(){  
    return { 
     controller: 'MainCtrl', 
     controllerAs: 'ctrl', 
     bindToController: true, 
     template: '<div>{{ctrl.name}}</div>' 
    };  
}); 

HTML摘錄：

<div ng-app="myapp"> 
    <div ng-controller="MainCtrl as ctrl"> 
     <div alert-box></div> 
    </div> 
</div> 

一個工作小提琴：http://jsfiddle.net/SNF9x/136/

請告訴我，如果你在你的心中別的東西。