Question

我对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触发事件时才有效。我读到这是一个不好的做法，所以我不知道如何实现这一点。

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

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

感谢您的考虑和帮助！

Answer 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来请求更新的数据。

自定义angularjs模块。指令之间的沟通

1 个答案: