4

実例： http： //plnkr.co/edit/wWS3UFB3IZ0cAI4u2x04？p = Preview

「OpenModal1」をクリックすると、次のエラーがスローされます。

エラー：Dialog.openに必要なテンプレートまたはtemplateUrlが見つかりませんでした。オプションまたはopenメソッドを使用して指定します。

ただし、を使用しないModal2はng-include正常に動作します。

また、ui-bootstrap-tpls-0.1.0.jsの代わりにが含まれている場合はui-bootstrap-tpls-0.2.0.js、すべて正常に機能します。

何か案は？

4

2 に答える 2

10

この問題は、モーダルディレクティブをターミナルに変更した結果だと思います。これは、他のディレクティブ（ng-includeなど）がモーダルと一緒に処理されないことを意味します。この変更を行ったコミットは次のとおりです。

https://github.com/angular-ui/bootstrap/commit/ec796ec2299d03ddfb821e97047c0329f11ab962#src/modal/modal.js

正直なところ、このディレクティブがターミナルである理由を正確に知るには十分な知識がありませんが、簡単な解決策の1つは、同じ要素に作用する2番目のディレクティブとしてではなく、モーダルの子としてng-includeを使用することです。これが私が意味することです：

<div modal="opened1">
    <ng-include src="'modal1.html'"></ng-include>
</div>

更新されたライブ例：http： //plnkr.co/edit/KBBOn2T8cbeLfB0Su9jp

于 2013-03-13T11:58:19.083 に答える
2

Angular-uiのバージョンはわかりませんが、モーダルウィンドウのドキュメントは混乱を招きます。モーダルウィンドウを表示する一部としてngIncludeディレクティブを実際に使用することはできますが、以下に示すように必須ではありません。以下の場合、モーダルhtmlとスクリプトは別々のファイルにあり、modal.open（）を使用してそれらを参照および表示します。何らかの理由で、更新可能なモデルは、$ scope ..のオブジェクトプロパティとして渡された場合にのみ有効にできました（コードの「vm。」を参照）。

ModalView.htmlスニペット

<!-- html elements reference the ModalViewCtrl decorated $scope -->
<input ng-model='vm.email' type='email' placeholder='Email address' autofocus />
<input ng-model="vm.password" type="password" class="form-control" placeholder="Password" />
<label class="checkbox">
    <input ng-model="vm.rememberMe" type="checkbox" />
    Remember me
</label>

ModalViewCtrl.jsスニペット

 angular.module('app')
   .controller('ModalViewCtrl', function($scope, $modal, parms) {

      /* decorate the $scope and/or preset the $scope.vm object
         as needed with parms.parm1, parms.parm2, ....
      */

      $scope.ok = function () {
         $modalInstance.close($scope.vm);
      };

      $scope.cancel = function () {
         $modalInstance.dismiss();
      };     

   });

SourcePageCtrl.jsスニペット

 angular.module('app')
   .controller('SourcePageCtrl', function($scope, $modal, ...) {

      $scope.open = function() {
         var modalInstance = $modal.open({
            templateUrl: 'path_literal_to_ModalView.html'
            ,controller: 'ModalViewCtrl'
            ,resolve : {
                parms : function() { return {
                   parms1 : value1
                  ,parm2 : value2
                  ,...
                }}
            });

         modalInstance.result.then(
            function (vm) { 
                $scope.result = vm;
            } , function () {
                ... 
            }
         );

      });
   });

ただし、includeを使用する場合は、2つの落とし穴があります。

  1. 'templateUrl'は、テンプレートファイルのURLとは対照的に、ngInclude自体のIDなどのモーダル要素containsタグのIDを参照する必要があります。

  2. 角度は属性値を評価するため、パスのsrc属性にリテラルが提供されている場合、要素はすでに引用符で囲まれた文字列内で引用符で囲まれている必要があります。

于 2013-09-30T03:19:13.080 に答える