AngularJS：在Controller中使用指令元素

我正在创建一个分页应用程序,用户可以在同一个窗口中切换页面(页面显示在彼此之下).每当有人更改页面时,我希望窗口滚动右侧页面

这是我的页面指令：

.directive('page',function () {
    return {
        restrict: "E",transclude: true,template: '<div ng-transclude></div>',link: function(scope,element,attrs) {
            /*
            * Better in controller,Now the function has to be evaluated for every directive.
            * */
            scope.$on('pageChanged',function(event,page) {
                if (parseInt(attrs.number) === page) {
                    if (page === 1) {
                        window.scrollTo(100,element[0].offsetTop - 110);
                    }
                    else {
                        window.scrollTo(0,element[0].offsetTop - 60);
                    }
                }
            });
        }
    }

这有效,但现在每个指令都会侦听pageChanged事件并相应地执行操作.我宁愿只在控制器中监听,让控制器将窗口滚动到右侧页面. (这种方式只需要评估一个功能).

$scope.$on('pageChanged',function (event,pageNr) {
            $scope.currentPage = pageNr;
            /*
            * Scroll to the right page directive here
            **/
        });

要做到这一点,我需要访问控制器中的页面元素,有没有办法做到这一点？

我还在寻找一种方法,当用户滚动窗口时,该方法可以将currentPage更改为右页.

我认为你不应该依赖事件,而是将一个控制器属性添加到指令对象并在那里声明指令的控制器.与此类似的东西(尚未测试过)：

.directive('page',controller: function ($scope,$element,$attrs,$transclude,otherInjectables) {
            // Add ng-click="goToPage(n)" directives on your HTML. Those should be inside of the <page> element for this to work.
            $scope.goToPage = function (page) {
                if (page === 1) {
                    window.scrollTo(100,$element[0].offsetTop - 110);
                }
                else {
                    window.scrollTo(0,$element[0].offsetTop - 60);
                }
        },}
});

有关更多信息,请参阅AngularJS documentation on directives.

原文地址：https://www.jb51.cc/angularjs/142504.html