AngularJS從$ stateProvider設置的控制器上的指令中調用函數？

Question

我已經設置了stateProvider，它為每個Tab設置了一個不同的控制器：

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');
});

主控制器的應用如下：

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">

上面列出的每個控制器：HomeCtrl，TopCtrl和TrendingCtrl如下所示：

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

每個控制器都有其自己的loadMorePosts函數。 在某些情況下，我正在創建一個無限滾動系統，因此當用戶滾動到頁面底部時，將調用loadMorePosts函數。 但是，在這種情況下，永遠不會調用該函數，也永遠不會記錄“ LOG 2”。 但是，會調用“ LOG 1”，因此滾動邏輯起作用。

我發現問題可能是該指令內部使用的范圍是指MainCtrl控制器的范圍，而不是由stateProvier設置的各個控制器。 我試圖將ng-controller動態地應用於選項卡容器，但這會導致“多個指令錯誤”。

再次，我只是假設這是導致問題的原因，我可能是錯的。

編輯：問題似乎是作用域引用了mainCtrl控制器。 如果我將loadMorePosts方法放在該控制器內部，則會調用該函數。 因此，如何確定作用域引用的是當前選項卡的控制器而不是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>

...

Answer 1

嘗試這個，

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");
    };
});

AngularJS從$ stateProvider設置的控制器上的指令中調用函數？

問題描述

1 個解決方案

解決方案1
1 已采納 2016-02-26 03:07:50

AngularJS從$ stateProvider設置的控制器上的指令中調用函數？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-02-26 03:07:50

解決方案1
1 已采納 2016-02-26 03:07:50