angularjs - 无法从 Controller 内访问指令范围

Question

我的 AngularJS 代码有问题。

我似乎无法从我的 Controller 访问我的指令范围。

指令

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

Controller

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($scope.text) 打印 undefined 吗？

Answer 1

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

app.directive('paginatedText',

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

    }
  ]);

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