个人中心
gpt4 book ai didi

javascript - AngularJS 从 $stateProvider 设置的 Controller 上的指令调用函数？

转载 作者：行者123 更新时间：2023-12-03 07:35:17 26 4
gpt4 key购买 nike

我设置了一个 stateProvider，它为每个选项卡设置不同的 Controller :

app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('home', {
        url : "/home",
        templateUrl : "main.html",
        controller : 'HomeCtrl'
    }).state('top', {
        url : "/top",
        templateUrl : "main.html",
        controller : 'TopCtrl'
    }).state('trending', {
        url : "/trending",
        templateUrl : "main.html",
        controller : 'TrendingCtrl'
    });
    $urlRouterProvider.otherwise('/home');
});

主 Controller 的应用如下:

app.controller("MainCtrl", function($scope, $location, $log) {
    $scope.selectedIndex = 0;
    $scope.$watch('selectedIndex', function(current, old) {
        switch (current) {
        case 0:
            $location.url("/home");
            break;
        case 1:
            $location.url("/top");
            break;
        case 2:
            $location.url("/trending");
            break;
        }
    });
});
...
<body ng-app="storeApp" layout="row" ng-controller="MainCtrl" ng-cloak>

我还创建了一个应用于选项卡容器的指令:

app.directive("autoLoad", function ($window) {
    return {
        scope: {
            load: '&load'
        },
        controller : function($scope, $element) {
            var scroller = $element;
            angular.element($window).bind("scroll", function() {
                if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                    console.log("LOG 1");
                    $scope.load(); // LOAD POSTS
                }
            });
        }
    };
});

选项卡容器:

<div flex layout="column" tabIndex="-1" role="main"
    class="md-whiteframe-z2" auto-load load="loadMorePosts()">
    <md-toolbar layout="row" layout-align="center center">

上面列出的每个 Controller :HomeCtrl、TopCtrl 和 TrendingCtrl 如下所示:

app.controller("HomeCtrl", function($scope, controllerManager) {
    // LOAD MORE POSTS:
    $scope.loadMorePosts = function() {
        console.log("LOG 2");
    };
});

每个 Controller 都有自己的 loadMorePosts 函数。对于某些上下文，我正在创建一个无限滚动系统，因此当用户滚动到页面底部时，将调用 loadMorePosts 函数。然而，在这种情况下，该函数永远不会被调用，并且“LOG 2”永远不会被记录。然而，“LOG 1”被调用，因此滚动逻辑有效。

我认为问题可能是指令内部使用的范围是指 MainCtrl Controller 的范围，而不是 stateProvier 设置的相应 Controller 的范围。我尝试将 ng-controller 动态应用到选项卡容器，但这会导致“多指令错误”。

再说一遍，我只是假设这是导致问题的原因，我可能是错的。

编辑:问题似乎是范围引用了 mainCtrl Controller 。如果我将 loadMorePosts 方法放入该 Controller 中，则会调用该函数。那么我如何确保作用域引用当前选项卡的 Controller 而不是 mainCtrl。

编辑:选项卡容器的 html:

<body ng-app="storeApp" layout="row" ng-controller="MainCtrl" ng-cloak>
<script type="text/ng-template" id="/html/main.html"></script>
<script type="text/ng-template" id="/html/login.html"></script>
<div flex layout="column" tabIndex="-1" role="main"
    class="md-whiteframe-z2" auto-load load="loadMorePosts">
    <md-toolbar layout="row" layout-align="center center">
    <h1>
        <img id="mainLogo" src="../images/logo.png" height="5%">
    </h1>
    </md-toolbar>
    <md-tabs md-dynamic-height md-center-tabs md-selected="selectedIndex">
        <md-tab>
            <md-tab-label>
                <md-icon class="in-line" md-font-library="material-icons">home</md-icon>
                <div class="in-line">New</div>
            </md-tab-label>
            <md-tab-body>
                <div ui-view flex></div>
            </md-tab-body>
        </md-tab>
        <md-tab>
            <md-tab-label>
                <md-icon class="in-line" md-font-library="material-icons">star</md-icon>
                <div class="in-line">Top</div>
            </md-tab-label>
            <md-tab-body>
                <div ui-view flex></div>
            </md-tab-body>
        </md-tab>
       <md-tab>
            <md-tab-label>
                <md-icon class="in-line" md-font-library="material-icons">whatshot</md-icon>
                <div class="in-line">Hot</div>
            </md-tab-label>
            <md-tab-body>
                <div ui-view flex></div>
            </md-tab-body>
        </md-tab>
    </md-tabs> 
</div>

...

最佳答案

试试这个，

app.directive("autoLoad", function ($window) {
    return {
        scope: {
            load: '=' // here you specify that the name load is same as in the attribute
        },
        controller : function($scope, $element) {
            var scroller = $element;
            angular.element($window).bind("scroll", function() {
                if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100)) {
                    console.log("LOG 1");
                    $scope.load(); // LOAD POSTS
                }
            });
        }
    };
});

更新

像这样改变html，

<div flex layout="column" tabIndex="-1" role="main"
    class="md-whiteframe-z2" auto-load load="loadMorePosts">

更新2

app.controller("MainCtrl", function($scope, $location, $log) {
    $scope.loadMorePosts = function() {
      console.log("main controller");
    };
});

app.controller("HomeCtrl", function($scope, controllerManager) {
    // LOAD MORE POSTS:
    $scope.$parent.loadMorePosts = function() {
        console.log("Home controller");
    };
});

关于javascript - AngularJS 从 $stateProvider 设置的 Controller 上的指令调用函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35640987/

26 4 0
文章推荐： javascript - 循环遍历数组以记录单击时的元素时出现问题
文章推荐： macos - MacOS 中使用 SwiftUI 的多列 TableViews
文章推荐： sql-server - 如何在 SQL Server Management Studio 中更改 LocalDB 的 "Database default locations"？
文章推荐： javascript - TemplateUrl 找不到我的模板
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com