无法从控制器内访问指令范围

时间:2015-06-23 12:25:51

标签: angularjs

我的AngularJS代码存在问题。

似乎我无法从我的控制器访问我的指令范围。

指令

app.directive('PaginatedText', function(){
    return {
        restrict: 'E',
        scope: {
            text: '='
        },
        controller: 'PaginatedTextController',
        templateUrl: '/frontend/views/paginated-text.html'
    };
})

控制器

app.controller('PaginatedTextController', ['$scope', function($scope){

    $scope.page = 1;

    $scope.limit = 200;


    console.log($scope, $scope.text);

}]);

指令调用

<paginated-text text="character.long_description"></paginated-text>

模板

<p>
    {{text}}
    <button>read more</button>
</p>

打印的console.log: console.log

知道为什么console.log($scope.text)打印未定义?

1 个答案:

答案 0 :(得分:0)

指令名称必须以小写字母开头!

app.directive('paginatedText',

&#13;
&#13;
angular.module('app', [])

.run(function($rootScope) {
    $rootScope.character = {
      long_description: 'LirumLarum'
    };
  })
  .directive('paginatedText', function() {
    return {
      restrict: 'E',
      scope: {
        text: '='
      },
      controller: 'PaginatedTextController',
      template: '<p>{{text}}<button>read more</button></p>'
    };
  })
  .controller('PaginatedTextController', ['$scope',
    function($scope) {

      $scope.page = 1;

      $scope.limit = 200;


      console.log($scope, $scope.text);

    }
  ]);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>


<div ng-app="app">
  <paginated-text text="character.long_description"></paginated-text>
</div>
&#13;
&#13;
&#13;