Angular Bootstrap手风琴动态调用不起作用

时间:2014-12-23 04:57:56

标签: javascript json angularjs

我是棱角分明的新人。我一直在尝试使用'ui.bootstrap'来实现bootstrap accordian。 如下所示在html中使用ng-repeat时动态调用工作正常。

           <div ng-app="test-accordion">
            <accordion>
            <accordion-group
              ng-repeat="group in groups"
              heading="{{group.title}}"
              is-open="group.anyOldValue">
              {{group.content}}
              <p ng-controller="LoadingController" isLoaded="{{isLoaded}}">IsLoaded: {{isLoaded}}</p>
            </accordion-group>
             </accordion>
            </div>

当我像这样以静态方式尝试相同时

<div ng-app="test-accordion">
            <accordion close-others="true" >
            <accordion-group >
                <accordion-heading ng-click="isopen=!isopen">
                  <div>
                    Test1
                    <i class="pull-right glyphicon" ></i>
                  </div>
                  </accordion-heading>
                  <div ng-controller="LoadingController" isLoaded="{{isLoaded}}">
                    Test cont1
                    <br/>IsLoaded: {{isLoaded}}
                  </div>
            </accordion-group>
            <accordion-group >                      
                <accordion-heading ng-click="isopen=!isopen" >
                 <div >
                   Test2
                   <i class="pull-right glyphicon" ></i>
                 </div>
                </accordion-heading>
                <div ng-controller="LoadingController" isLoaded="{{isLoaded}}">
                  Test cont2 
                  <br/> IsLoaded: {{isLoaded}}
                </div>   
              </accordion-group >
          </accordion>
          </div>

'{{isLoaded}}'没有发生。我的模块控制器如下,

var app = angular.module('test-accordion', ['ui.bootstrap']);


function AccController($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: "Test1",
      content: "Dynamic Group Body - 1",
      anyOldValue: true
    },
    {
      title: "Test2",
      content: "Dynamic Group Body - 2",
      anyOldValue: false
    }
  ];
}
function LoadingController($scope, $timeout) {
  $scope.$watch(
    'group.anyOldValue',
    function(value) {
      if ( value && !$scope.isLoaded) {
        console.log('loading...');
        $timeout(function() {
          // console.log('loaded');
          $scope.isLoaded = '1';
        }, 1000);
      }
    }
  );
}

请告知为什么isLoaded不能使用静态手风琴?

0 个答案:

没有答案