在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中创建子范围

回答

相关问题