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

问题描述

在这个 plunk 我有以下内容:

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

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

HTML

<button ng-click="openModal()">打开模态</button><script type="text/ng-template" id="myModalContent.html"><div class="modal-header"><h4 class="modal-title">标题</h4>
<ddl control="ddlControl"></ddl><div class="modal-footer"><button type="submit">提交</button>

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',范围:$范围});console.log($scope.ddlControl);$scope.ddlControl.set();};}).directive('ddl', function () {var 指令 = {};指令.restrict = 'EA';指令范围 = {控制:'='};directive.template = '<div>someValue: {{someValue}}</div>';指令.link = 函数(范围、元素、属性){scope.control = scope.control ||{};scope.control.set = function() {范围.someValue = 1;};};返回指令；});

解决方案

在打开模态和运行模态 HTML 摘要之间存在竞争条件.

当按钮被点击时 $scope.openModal() 被执行.模态打开并进入摘要阶段.但是 javascript 不会等到消化完成，所以它会继续执行 $scope.openModal() 直到结束.

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

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

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

对象{结果:承诺，打开:承诺，呈现:承诺}

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

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

In this plunk I have the following:

• A control object shared between the controller and the directive.
• The directive declares a method in the control object.
• The controller invokes the method to set a value.
• The directive is included in an 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

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

解决方案

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

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.

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

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

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

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

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

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