Question

我尝试使用组件准备我的SPA到Angular 1.5，因此我通过这个方案将我的页面划分为2个指令（未来的组件）：

Playlist.html

<playlist-managing></playlist-managing>
<song-list></song-list>

在播放列表管理指令中，我应该有可能过滤放置在songList指令中的歌曲。那么，最好的方法是什么？我可以在$ scope中使用事件，但我不认为这是一个很好的解决方案。

谢谢。

Answer 1

指令之间共享数据有很多种方法，第一种也是最好的方法是使用Factory服务并与之共享数据，第二种方式是指令的共享控制器，第三种方式是将数据保存在这些指令的父控制器中指令和使用属性将共享数据赋予指令，第四种方法是使用共享范围指令，在父控制器和指令之间共享范围，这里是上述方法的链接：

共享控制器：https://thinkster.io/a-better-way-to-learn-angularjs/directive-to-directive-communication

工厂服务：http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

共享范围指令：http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/11/understanding-scopes-in-angularjs-custom-directives.aspx

Answer 2

angularjs中的指令提供隔离范围，用于将控制器中的数据独立绑定到指令。因此，您可以使用通过每个指令的双向数据绑定将范围从控制器传递到指令。以下是一些例子：

首先，您需要在控制器中初始化范围：

.controller('playlistController', function() {
    $scope.songType = 'pop';
}

然后通过隔离范围将范围传递到每个指令中，并在每个指令中使用双向数据绑定：

.directive('playlistManaging').function({
    return {
        scope: {
             songType: '='
        },
        controller: function() {
             //some logic here
        }
    }
})

.directive('songList').function({
    return {
        scope: {
             songType: '='
        },
        controller: function() {
             //some logic here
        }
    }
})

然后通过HTML属性元素连接范围。

//This is just a quick sample, the best solution is to define the controller inside angular routes
<div ng-controller="playlistController">
    <playlist-managing song-type="songType"></playlist-managing>
    <song-list song-type="songType"></song-list>
</div>

希望有所帮助。

指令之间的连接（Angular 1.4.8）

2 个答案: