自定义 angularjs 模块。在指令之间进行通信答案

【问题标题】：Custom angularjs module. Communicate between directives自定义 angularjs 模块。在指令之间进行通信
【发布时间】：2015-12-15 15:13:07
【问题描述】：

我对 Angularjs 比较陌生，直到现在我已经通过在互联网上搜索了很多解决了 angularjs 的问题，但我无法解决这个问题。希望任何人都可以帮助我提供有关 angularjs 的想法和更好的知识。

我正在尝试制作我的第一个自定义指令，我需要通过父控制器在同一个模块中传达两个指令。当我尝试使用 require 属性时，我总是遇到错误：错误：$compile:ctreq 缺少必需的控制器。

我是不是做错了什么？

(function(){

'use strict';

var INTERVAL_DELAY = 100;
var SCROLL_DELTA = 50;

angular.module('vm.hidemenu',[])

.controller('vmHideMenuTopCtrl',function(){
    return{
        sayHello : function(){
            console.log('Hello man!');
        }
    }
})

.directive('vmHideMenuTop',[function(){

    return {

        restrict: "A",
        replace: true,
        template: "<h1>Hello World</h1>",

        link: function(scope, element, attrs){


        },

        controller: 'vmHideMenuTopCtrl'

    }

}])

.directive('vmScrollableArea',['$window',function($window){
    return {

        restrict : "A",
        require : "^vmHideMenuTop",

        link : function(scope,element,attrs,menuCtrl){

            var e = angular.element(element[0]);
            var isScrolling = false;
            var lastScrollPos = 0;
            var scrolling; // timeout

            e.bind('scroll',function(event){

                var obj = event.target;
                var scrollTop = obj.scrollTop;

                isScrolling = true;

                $window.clearTimeout(scrolling);

                if(scrollTop > lastScrollPos ){
                    console.log('scroll Down');
                }else{
                    console.log('scroll UP');
                }

                scrolling = $window.setTimeout(function(){
                    isScrolling = false;
                    lastScrollPos = obj.scrollTop;
                    menuCtrl.sayHello();
                },INTERVAL_DELAY);


            })

        }

    }
}]);

}());

我尝试了其他方法来实现这一点，例如触发事件并尝试听到这些事件。那只有在我通过 $rootScope 触发事件时才有效。我读到这是一种不好的做法，所以我不知道如何实现这一点。

代码背后的想法是有一个可滚动的区域，可以与顶部导航栏通信以隐藏或显示它，就像移动应用一样。

对不起，如果我不能以最好的方式表达自己，我不是英语母语。

感谢您的考虑和帮助！

【问题讨论】：

你能创建一个 plunkr 吗？ vmScrollableArea 是在 vmHideMenuTop 里面吗？

标签： angularjs angularjs-directive

【解决方案1】：

我的建议是为每个指令使用单独的控制器和共享数据的服务。你可以像这样使用观察者模式：

app.service('myService', function () {
    this.data = [];
    var observers = [];
    var self = this;

    this.addObserver = function (callback) {
        observers.push(callback);
    };

    var notifyObservers = function () {
        angular.forEach(observers, function (callback) {
            callback(self.data);
        });
    };


    this.addData = function (data) {
        this.data.push(data);
        notifyObservers();

    }
});

在控制器内部：

myService.registerObserverCallback(function (data) {
            $scope.myData = data;
            console.log(data);
        });

或者，如果您只是想在数据更新时在服务内部使用带有$broadcast 的事件，并且在控制器内部使用$on 来请求更新的数据。

【讨论】：