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

【问题标题】：Can't access directive scope from within controller无法从控制器内访问指令范围
【发布时间】：2015-09-09 06:02:10
【问题描述】：

我的 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($scope.text) print undefined 吗？

【问题讨论】：

文本使用@符号
不，使用“@”会将 $scope.text 设置为“character.long_description”。我的代码不会这样 eval。
使用 bindtocontroller 和 controllerAs 代替作用域
这在控制器初始化后设置原始变量的实际值时很常见。控制台欺骗了您：$scope 被打印为参考。打印时，text 未定义，当您在控制台中展开 $scope 时，它已被定义。所以：character.long_description 被赋予值'<p>Lorem ipsum...' 在控制器被调用。为它的价值添加一个手表，并在那里采取行动来纠正你的问题。
第一个 console.log 打印末尾的“i”图标正是 Nikos 提到的。 stackoverflow.com/a/18098661/1235243

标签： angularjs

【解决方案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>

【讨论】：