AngularJS Вызов функции из директивы на контроллере, заданной $ stateProvider?

У меня настроить stateProvider, который устанавливает другой контроллер для каждой вкладки:

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-контроллер динамически к контейнеру табуляции, но это приводит к «множественной ошибке директивы».

Опять же, я просто делаю предположение, что это вызывает проблему, возможно, я ошибаюсь.

EDIT: проблема заключается в том, что область действия относится к контроллеру mainCtrl. Если я помещаю метод loadMorePosts внутри этого контроллера, вызывается функция. Итак, как я могу убедиться, что область действия ссылается на контроллер текущей вкладки, а не на mainCtrl.

EDIT: 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> 

...

источник

2016-02-26 user3024235

Просто пробовал. Его все еще не называют. – user3024235

Try это,

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

Update

изменения HTML, как это,

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

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

источник

2016-02-26 03:07:50

Установка нагрузки на «=» причины: Непринятые TypeError: $ scope.load не является функцией – user3024235

@ user3024235, также измените html. (см. обновленный ответ) –

Проблема заключается в том, что область действия относится к контроллеру mainCtrl, а не к другим контроллерам, которые удерживают эту функцию. – user3024235

AngularJS Вызов функции из директивы на контроллере, заданной $ stateProvider?

ответ

Смежные вопросы