在ng-repeat中访问自定义指令内的app控制器范围

时间:2016-05-04 07:45:28

标签: angularjs-directive scope angularjs-ng-repeat

我对此感到很陌生,如果我问一些明显的东西,我很抱歉。
我有一个应用程序,控制器在范围内持有一些配置变量。我有一个在ng-repeat中使用的自定义指令,必须使用这个配置。
为了调试目的,我需要对指令中反映的配置蜜蜂进行更改。我怎样才能实现这一目标。
到目前为止,我的工作点不正确我的点图是未定义的

       angular.module('demo', [])
      .directive('demoDir', function () {
          var dirController = ['$scope', function ($scope) {
              $scope.totalPoints = 0;

              $scope.$watch('person', function(newVal, oldVal){
                  resetPoints(newVal);
              }, true);

              function resetPoints(pPerson){
                   $scope.totalPoints = $pointsMap['VIP'] * pPerson.points ;
              } 
          return {
              restrict: 'E',   
              scope: {
                  person: '=' ,
                  pointsMap : '='
              },
              controller: dirController, 
              template: '<span> {{totalPoints}}</span>'
         }
      })
      .controller('mainAppController', function ($compile, $scope, $q ) { 
         /*CONFIG */
          $scope.points = {
                  'VIP': 8.50,  
                  'Standard': 7.50,     
          };
      });
      <demoDir person='myobject' pointsMap='points' />

1 个答案:

答案 0 :(得分:0)

您希望指令具有隔离范围的任何特定原因?如果没有使用隔离范围的限制,您可以简单地将指令的范围设为false(现在指令将使用父范围)

        angular.module('demo', [])
  .directive('demoDir', function () {
      var dirController = ['$scope', function ($scope) {
          $scope.totalPoints = 0;

          $scope.$watch('person', function(newVal, oldVal){
              resetPoints(newVal);
          }, true);

          function resetPoints(pPerson){
               $scope.totalPoints = $pointsMap['VIP'] * pPerson.points ;
          } 
      return {
          restrict: 'E',   
          scope: false,
          controller: dirController, 
          link: function(scope, element, attrs){
              //scope.points should be available
          }
          template: '<span> {{totalPoints}}</span>'
     }
  })
  .controller('mainAppController', function ($compile, $scope, $q ) { 
     /*CONFIG */
      $scope.points = {
              'VIP': 8.50,  
              'Standard': 7.50,     
      };
  });

  //assuming that your directive is housed inside the mainAppController
  <div ng-controller="mainAppController">
    <demoDir/>
  </div>

如果要使用,您还可以访问指令链接功能中的父作用域属性。