Question

在下面的例子中（http://jsfiddle.net/akanieski/t4chbuwq/1/）我有一个指令，里面有一个ngRepeat ......在链接阶段我无法访问ngRepeat中的html。只有shade-element内的内容是我做错了什么？

控制器：

module.controller("MainCtrl", function($scope, $timeout) {
  $scope.currentPanel = 1;

  $timeout(function(){
    $scope.items = [1,2];
  }, 1000)

  $scope.loadPanelOne = function() {
    if (!$scope.$$phase) $scope.$apply(function(){$scope.loadingPanelOne = true;});
    $timeout(function(){
        $scope.loadingPanelOne = false;
    }, 2000);
  }

  $scope.loadPanelTwo = function() {
    if (!$scope.$$phase) $scope.$apply(function(){$scope.loadingPanelTwo = true;});
    $timeout(function(){
        $scope.loadingPanelTwo = false;
    }, 2000);
  }

  $scope.loadPanel3 = function() {
    if (!$scope.$$phase) $scope.$apply(function(){$scope.loadingPanel3 = true;});
    $timeout(function(){
        $scope.loadingPanel3 = false;
    }, 2000);
  }

  $scope.loadPanel4 = function() {
    if (!$scope.$$phase) $scope.$apply(function(){$scope.loadingPanel4 = true;});
    $timeout(function(){
        $scope.loadingPanel4 = false;
    }, 2000);
  }
});

指令：

var module = angular.module("myApp", []);

module.directive('shadeSet', ['$rootScope', '$timeout', function($rootScope, $timeout) {
  return {
    restrict: "E",
    scope: {
        "mode": "=",
      "currentPanel": "="
    },
    controller: function() {

    },
    link: function(scope, element, attributes) {
      $rootScope.$on('panelOpening', function(ev, args) {
        if (scope.mode === 'exclusive') {
          element
            .find('shade-panel')
            .addClass('hide')
          $('[id="' + args.id + '"]',element).removeClass('hide');
        } else if (args.state === 'open') {
          $('[id="' + args.id + '"]',element).removeClass('hide');
        } else if (args.state === 'close') {
          $('[id="' + args.id + '"]',element).addClass('hide');
        } else {
          $('[id="' + args.id + '"]',element).toggleClass('hide');
        }
        $rootScope.$broadcast('panelOpened', {id: args.id, state: 'open'});
      })

        if (scope.currentPanel) {
          $rootScope.$broadcast('panelOpening', {id: scope.currentPanel, state: 'open'});
        }


    }
  }
}])

module.directive('shadePanel', ['$rootScope', function($rootScope) {
  return {
    restrict: "E",
    require: '^shadeSet',
    scope: {
      "id": "=",
      "onOpen": "&",
      "scrollOnOpen": "="
    },
    link: function(scope, element, attributes) {
          $rootScope.$on('panelOpened', function(ev, args){
        if (args.id === scope.id && scope.onOpen) scope.onOpen();
        if (scope.scrollOnOpen) {
          console.log("Scrolling to " + args.id)
          $('html, body').animate({
              scrollTop: $(element).offset().top
          }, 500);
        }
      })
    }
  }
}])

module.directive('shadeToggle', ['$rootScope', function($rootScope) {
  return {
    restrict: "E",
    require: '^shadeSet',
    scope: {
      target: "="
    },
    compile: function() {
      return {
        pre: function(scope, element, attributes) {
          element.on('click', function() {
            $rootScope.$emit('panelOpening', {id: scope.target});
          });
          scope.$on('$destroy', function() {
            element.off('click');
          });
        }
      };
    }
  }
}])

HTML

<div ng-controller="MainCtrl" ng-app="myApp">

  <shade-set current-panel="currentPanel">
    <div ng-repeat="i in items">

      <shade-toggle target="1"><a href>Open One</a></shade-toggle>


      <shade-panel id="1" class="hide" on-open="loadPanelOne()">
        <span ng-show="loadingPanelOne">... Loading Panel 1 ...</span>
        Hello World
      </shade-panel>
    </div>

  </shade-set>

</div>

无法在自定义指令内的ngRepeat内访问DOM

0 个答案: