Интеграция директивы в угловом UI модального

Question

В этом plunk я следующее:

• Объект управления общего между контроллером и директивой.
• Директива объявляет метод в объекте управления.
• Контроллер вызывает метод установки значения.
• Директива включена в Угловой интерфейс.

По какой-то причине объект управления пуст, когда модальный режим открыт (см. Журнал консоли). Как вызвать метод из контроллера для установки значения поля?

HTML

<div ng-app="app" ng-controller="myCtl"> 

     <button ng-click="openModal()">Open modal</button> 

     <script type="text/ng-template" id="myModalContent.html"> 

      <div class="modal-header"> 
       <h4 class="modal-title">The Title</h4> 
      </div> 

      <ddl control="ddlControl"></ddl>     

      <div class="modal-footer"> 
       <button type="submit">Submit</button> 
      </div> 

     </script> 

    </div> 

Javascript

var app = angular.module('app', ['ui.bootstrap']); 
app.controller('myCtl', function($scope,$uibModal) { 

     $scope.ddlControl = {}; 

     $scope.openModal = function() { 
      $scope.modalInstance = $uibModal.open({ 
       templateUrl: 'myModalContent.html', 
       scope: $scope 
      }); 

      console.log($scope.ddlControl); 
      $scope.ddlControl.set(); 

     }; 
}) 

.directive('ddl', function() { 

    var directive = {}; 
    directive.restrict = 'EA'; 
    directive.scope = { 
     control: '=' 
    }; 
    directive.template = '<div>someValue: {{someValue}}</div>'; 
    directive.link = function (scope, element, attrs) { 

     scope.control = scope.control || {}; 

     scope.control.set = function() { 
      scope.someValue = 1; 
     }; 

    }; 
    return directive; 
}); 

Answer 1

Существует состояние гонки между открытием модальный и работает дайджеста модальной HTML.

При нажатии кнопки $scope.openModal(). Модаль открывается и переходит в фазу дайджеста. Но javascript не ждет завершения обработки, поэтому он продолжает выполнение $scope.openModal() до конца.

Вам необходимо обработать обещание $ uibModal.open(). Rendered(). UibModal разрешает обещание rendered, когда это будет сделано.

$scope.openModal = function() { 
     $scope.modalInstance = $uibModal.open({ 
      templateUrl: 'myModalContent.html', 
      scope: $scope 
     }).rendered.then(function() { 
      console.log($scope.ddlControl); 
      $scope.ddlControl.set(); 
     }); 
    }; 

в $ uibModal.open() возвращает следующее:

Object {result: Promise, opened: Promise, rendered: Promise}

В обещание блока rendered, вы можете безопасно использовать поля, которые были изменены с помощью директивы ,

Plunker: http://plnkr.co/edit/GnIThstxkuR06felh8Pe?p=preview