指令控制器功能不起作用

Question

我是 angular js 的新手。我在指令中遇到问题。我有一个 ng-href，我从中调用指令，其中在指令控制器中编写了一个函数。我控制了控制器，它工作正常，但上面的功能不工作。

这是我的 config.js 文件：

 angular.module('movieApp').config(['$urlRouterProvider','$stateProvider', '$locationProvider', function($urlRouterProvider,$stateProvider,$locationProvider){
            $stateProvider.state('home',{
                url : '/home',
                templateUrl : 'app/components/home/home.html',
                controller : 'HomeController',
            }).state('yearsort',{
                url : '/yearsort/:id',
                template : '<year-sort></year-sort>',       
            });
            $urlRouterProvider.otherwise('home');
    }]);

我的主页里有这两个链接：

   <ul>
           <li><a ng-href="#/yearsort/oldtonew">Old to new</a></li> 
           <li><a ng-href="#/yearsort/newtoold">New to old</a></li>
      </ul>

这是我的指令文件：

  angular.module('movieApp.yearsort.directives', []).directive('yearSort',[function(){
    return{
    restrict : 'AEC',
        replace : true,
        transclude :  true,
        scope : {
             yearSortFn: '&'
        },
        controller : 'YearsortController',
        templateUrl : 'app/components/yearsort/yearsort.html',
    };
}]);

这是我的 YearsortController 文件，其中显示了 console.log('abc')，但该功能不起作用。

  angular.module('movieApp.yearsort.controller', []).controller('YearsortController', ['$scope','HomeFactory','$timeout','$state',function($scope,HomeFactory,$timeout,$state) {

    $scope.sortParam = $state.params.id;
        console.log('abc');

   $scope.yearSortFn = function(){
        HomeFactory.movieApiFn()
            .then(function(data){
                if($scope.sortParam=='oldtonew'&&$scope.sortParam!='newtoold'){
                    $scope.yearlyMovie = data.sort(function(a, b){return a.title_year - b.title_year});
                }
                else if($scope.sortParam=='newtoold'&&$scope.sortParam!='oldtonew'){
                    $scope.yearlyMovie = data.sort(function(a, b){return b.title_year - a.title_year});
                }
            },function(){
                console.log('data cannot retrieved');
            });
    } 

     <div ng-controller="YearsortController">
    <year-sort yearSortFn="yearSortFn()"></year-sort>
  </div>

这是我的模板文件：

<div ng-controller="YearsortController">
        <div ng-repeat="movie in yearlyMovie track by $index" class="col-xs-10 col-sm-4 col-md-3 col-lg-3">
          <div class="panel panel-primary">
           <div class="panel-heading">{{movie.movie_title}}</div>               
          </div>
        </div>
     </div>
</div>

Answer 1

总的来说，根据您提供的内容，这是我在审查之后可以得出的结论。也就是说，如果这没有帮助，请为社区提供演示以更好地提供帮助。至少解释一下如果发生了什么，错误与否。

您有一个额外的 <div> 标签：

<div ng-controller="YearsortController">
    <div ng-repeat="movie in yearlyMovie track by $index" class="col-xs-10 col-sm-4 col-md-3 col-lg-3">
        <div class="panel panel-primary">
            <div class="panel-heading">{{movie.movie_title}}</div>
        </div>
    </div>
</div>
</div> <!-- Remove this -->

此外，在您的开头 <div ...> 中，将其更改为简单的 <div>。

此外，卡在您的控制器代码下的 HTML 片段是什么？我会删除它。

     <div ng-controller="YearsortController">
    <year-sort yearSortFn="yearSortFn()"></year-sort>
  </div>

因此，也将其删除（您没有使用它）：

scope : {
     yearSortFn: '&'
},

指令控制器功能不起作用

Directive controller function is not working

angularjs

controller

directive