指令之间的连接(Angular 1.4.8）

Connection between directives(Angular 1.4.8)

本文关键字：Angular 之间 连接 指令      更新时间：2023-09-26

我试图将我的SPA准备为Angular 1.5，以便使用组件，因此我将页面按以下方案划分为2个指令（未来的组件）：

播放列表.html

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

在playlistManaging指令中，我应该可以过滤songList指令中的歌曲。那么，最好的方法是什么呢？我可以在$scope中使用事件，但我认为这不是一个好的解决方案。

谢谢。

指令之间共享数据有很多方法，第一种也是最好的方法是使用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

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>

希望能有所帮助。

相关文章：