2016-06-08 4 views
1

Я новичок с угловой JS, и я пытаюсь реализовать модальность с гиперссылка, я HAM со ссылкой на этот plunker

http://plnkr.co/edit/M7qfegYIOqOQekoxLaj5?p=preview

я смог успешно открыть модальные на гиперссылка, но я не могу отображать данные, возвращаемые функцией, она всегда дает ошибку, $ timeout не является функцией, я передаю дополнительный параметр также из ng-click.

<td ng-repeat="column in columns"> 
     <div class="animate-switch" ng-if="column == spaceIdHeaderName"> 
     <a href="" ng-click="open(user[column])"> {{user[column]}} </a></div> 
     <div class="animate-switch" ng-if="column != spaceIdHeaderName">{{user[column]}}</div> 

    </td> 

Мои Модальные JS как:

$scope.open = function ($timeout, $log, parameter1) { 

      var modalInstance = $uibModal.open({ 
       templateUrl: 'myModalContent.html', 
       controller: ModalInstanceCtrl, 
       resolve: { 
        items: function ($http) { 
         return "loadind data..."; 
        } 
       } 
      }); 

      modalInstance.opened.then(function($timeout, $log) { 
       $scope.loadData(modalInstance,$timeout, $log); 
      }, function() { 
       $log.info('Modal dismissed at: ' + new Date()); 
      }); 

      $scope.loadData = function(aModalInstance, $timeout, $log) { 
       $timeout(function() { 
        aModalInstance.setItems("data loaded..."); 
       }, 3000); 
      }; 

    }; 

     var ModalInstanceCtrl = function ($scope, $uibModalInstance, items) { 
      $scope.items = items; 

      $uibModalInstance.setItems = function(theData) { 
       $scope.items = theData; 
      }; 

      $scope.ok = function() { 
       $uibModalInstance.close('close'); 
      }; 
      $scope.cancel = function() { 
       $uibModalInstance.dismiss('cancel'); 
      }; 
     }; 
    }); 

Cant выяснить, почему $ таймаут не будет решена, это что-то связано с передачи параметров?

ответ

1

Вам необходимо включить $ timeout в качестве зависимости в вашем контроллере.

Не только то, что $ log и $ http также должны быть включены.

Это утверждение в вашем uibModal:

resolve: { 
      items: function ($http) { 
       return "loadind data..."; 
      } 
     } 

В $ scope.items = пункты будут просто назначить "загрузка данных ..." строки к нему. Я не знаю причину, по которой вы это решаете.

2

Вам нужно впрыснуть $ timeount, $ HTTP и $ журнала в вашем контроллере

angular.module('plunker', ['ui.bootstrap']); 
var testCtrl = function($scope, $modal, $timeout, $log,$http) { 
$scope.open = function() { 
var modalInstance = $modal.open({ 
    templateUrl: 'testContent.html', 
    controller: testCtrl, 
    resolve: { 
    mydata: function() { 
     return "Loading..."; 
    } 
    } 
}); 
0

Вы нашли решения в других ответах. Теперь вам нужно взглянуть на разные методы Dependency Injection.

DI распространяется повсеместно на углы. Вы можете использовать его при определении компонентов или при предоставлении блоков запуска и конфигурации для модуля.

Компоненты, такие как службы, директивы, фильтры и анимации, являются , определяемыми методом фабричной инъекции или функцией конструктора. Эти компоненты могут быть снабжены компонентами «сервис» и «значение» в качестве зависимостей .

Контроллеры определяются с помощью функции конструктора, который может быть впрыскиваемого с любым из «сервис» и «значение» компонентов, как зависимостей, но они также могут быть снабжены специальными зависимостей. См. Ниже список контроллеров для списка этих специальных зависимостей.

Метод запуска принимает функцию, которая может быть введена в качестве зависимостей «0», «значение» и «константа». Примечание , что вы не можете вводить «поставщиков» в блоки запуска.

Метод конфигурации принимает функцию, которая может быть введена в качестве зависимостей в качестве «поставщиков» и «константных» компонентов . Обратите внимание: не может внедрять компоненты «сервис» или «значение» в конфигурацию.

Смежные вопросы