在AngularJS中創建子範圍

我有一個savingIndicator指令，它將顯示一個小節，然後顯示成功/錯誤消息。它綁定到像saving和message這樣的東西來向用戶顯示信息。該指令是非常愚蠢的和真的只是加載像這樣在AngularJS中創建子範圍

m.directive('savingIndicator', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '/templates/savingindicator' 
    }; 
});

SavingIndicator.html（片段）的模板：

<span ng-show="saving"> 
    <img src="/Content/loader.gif" style="vertical-align: middle;" /> Saving... 
</span>

在我目前的控制器我有一些需要保存的東西，所以我想將它們像這樣分離：

var thingToSave1 = { 
    saving: false, 
    message: "" 
} 
var thingToSave2 = { 
    saving: false, 
    message: "" 
}

我怎麼能告訴savingIndicator不能把眼光放在它的變量主要適用範圍（控制器），但裏面的其中一個對象？在我的頭，將工作像下面是什麼，但它不是目前正在

<input text="Save item 1" /> 
<saving-indicator ng-model="thingToSave1"></saving-indicator> 
... 
<input text="Save item 2" /> 
<saving-indicator ng-model="thingToSave2"></saving-indicator>

來源

2015-07-20 Chris

您需要在指令的定義中添加另一個參數。您需要的參數稱爲「範圍」。查看Angular的文檔已經在那裏解釋。如果你要玩一點點，這是一個plunker（從角文檔）：

... 
return { 
    restrict: 'E', 
    scope: { 
    customerInfo: '=info' 
    }, 
    templateUrl: 'my-customer-iso.html' 
};

http://plnkr.co/edit/XFy6IB0cdBTMglItIgWR。

這樣你就可以爲指令指定一個新的作用域而不是使用控制器。

來源

2015-07-20 11:42:09

感謝你們，在某些情況下，我沒有一個模型可以通過（即使用當前範圍即時通訊），如果我沒有'thingToSave'，我如何通過當前範圍。 ''似乎沒有工作 – Chris

對不起，但我沒有關注你。你可以試着解釋一下還是提供更多信息？ –

快速黑客將如下所示：

m.directive('savingIndicator', function() { 
    return { 
    restrict: 'E', 
    templateUrl: '/templates/savingindicator', 
    scope: { 
     myModel: '=' 
    } 
    }; 
}); 

//--------------- 

<span ng-show="myModel.saving"> 
    <img src="/Content/loader.gif" style="vertical-align: middle;" />Saving... 
</span> 

//--------------- 

<saving-indicator my-model="thingToSave1"></saving-indicator>

您可以瞭解更多有關指令和隔離範圍選項Angular docs。

來源

2015-07-20 11:40:17 mostruash

在AngularJS中創建子範圍

回答

相關問題