Angular UI Modal中的集成指令 [英] Integrating directive in Angular UI Modal

问题描述

在此 plunk 中，我有以下内容:

In this plunk I have the following:

• 控制器和指令之间共享的控制对象.
• 指令在控制对象中声明了一个方法.
• 控制器调用该方法来设置值.
• 该指令包含在Angular UI Modal中.

由于某种原因，打开模态时控制对象为空(请查看控制台日志).如何从控制器调用方法来设置字段值?

For some reason the control object is empty when the modal is opened (look at the console log). How to invoke the method from the controller to set the field value?

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

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;
});

推荐答案

在打开模式与运行模式HTML的摘要之间存在竞争条件.

There is a race condition between opening the modal and running a digest of the modal HTML.

单击按钮后，将执行 $ scope.openModal().模态打开并进入摘要阶段.但是javascript不会等到摘要完成后，因此它将继续执行 $ scope.openModal()直到结束.

When the button is clicked $scope.openModal() is executed. The modal opens and gets into the digest phase. But javascript is not waiting until the digesting has been completed, so it continues executing $scope.openModal() until the end.

您需要处理$ uibModal.open().rendered()的承诺.uibModal完成后解析 rendered 承诺.

You need to handle the promise of $uibModal.open().rendered(). The uibModal resolves the rendered promise when it's done.

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

$ uibModal.open()函数返回以下内容:

The $uibModal.open() function returns the following:

对象{结果:承诺，已打开:承诺，已渲染:承诺}

在 rendered 的promise块中，您可以安全地使用已由伪指令更改的字段.

In the promise block of rendered, you can safely make use of the fields that has been changed by the directive.

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

这篇关于Angular UI Modal中的集成指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！