AngularJS从指令控制器将数据传递到另一个

问题描述：

我有一个表格，这与您可以编辑图片库，当然我创建了一个指令，它，像这样：AngularJS从指令控制器将数据传递到另一个

galleryEdit.html

<div> 
    <form ng-submit="submit()"> 
    <label>Headline:</label> 
    <input type="text" ng-model="gallery.headline" placeholder="Enter headline here" value=""/> 

    <label>channels:</label> 
    <channelselect></channelselect> 

    <input type="submit"/> 
    </form> 
</div>

所以，galleryEdit还有一个指示信道选择，这与您可以选择的通道（不仅是画廊）

channelselect.html

<div> 
    <select> 
     <option value="{{channel.shortCode}}">{{channel.name}}</option> 
    </select> 
</div>

GalleryEdit有一个控制器，为其指令传递数据（称为“图库”），因此其$ scope具有$ scope.gallery属性，其中包含通道ID：$ scope.gallery.channel。由于channelselect具有不同的控制器，它具有其范围，因此无法从该范围中看到此gallery.channel。有没有什么方法可以将图库中的数据传递给通道控制器/指令？使用$ scope。$ parent不是解决方案，因为channelSelect不应该知道数据来自哪里。

仅仅因为两个指令都有一个控制器并不意味着它们有单独的作用域。指令定义对象上的'scope'属性确定是否创建新的作用域（或否），以及新作用域是否为隔离作用域。所以一个可能的解决方案是不创建任何新的范围，那么这两个指令将共享相同的范围，并因此可以访问所有相同的$范围属性/数据。 –

答

您可以在您的galleryEdit指令的范围和channelselect指令的范围之间设置双向绑定。

在你channelselect指令的定义，你可以这样做以下：

directive('channelselect', [function() { 
    ... 
    scope: {channel: '='} 
    ... 
}])

这将创建一个隔离范围您channelselect指令，并让你使用channel属性您<channelselect>标签设置双向绑定到其父范围。

所以现在你可以在galleryEdit.html做到这一点：

<channelselect channel="gallery.channel"></channelselect>

现在channelselect的$scope.channel将被绑定到galleryEdit的$scope.gallery.channel。

查看指令定义对象 AngularJS的Directives部分指南了解有关隔离范围的更多详细信息。

谢谢老兄，这个作品完美。 – user2039598

AngularJS从指令控制器将数据传递到另一个

相关推荐