AngularJSがデータをブートストラップモーダルに渡す

Question

私は何かが不足していると思いますが、何が分かりません。
基本的に私は以下のようにオブジェクトをモーダルに渡そうとしていますが、渡されたオブジェクトを取得する代わりにnullを取得します...だからスコープの問題だと思いますが、 。

コントローラ

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) { 

$scope.selected = null; 

$scope.open = function (item) { 

    $scope.selected = item; 

    $log.info('Open' + $scope.selected); // get right passes object 

    var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'musicViewModel', 
     size: 'lg', 
     resolve: { 
      items: function() { 
       return $scope.selected; 
      } 
     } 
    }); 
}; 

$scope.toggleAnimation = function() { 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
}; 
}); 

ビュー

<div class="row" ng-controller="musicViewModel"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      <ul> 
       <li> 
        {{ selected }} // always gets null 
       </li> 
      </ul> 
     </div> 
    </script> 
</div> 

Answer 1

私はあなたにもresolveを削除することができますことを実行して、代わりに再び同じcontrollerを渡すのでは独自のコントローラのscopeを渡すことができことをお勧めしたいです。

var modalInstance = $uibModal.open({ 
    templateUrl: 'myModalContent.html', 
    scope: $scope, //passed current scope to the modal 
    size: 'lg' 
}); 

そうでない場合は、新しいcontrollerを作成し、それを開いている間にmodalためにそのコントローラを割り当てる必要があります。

Answer 2

解決策を使用すると、マップは所定のコントローラに注入されます。

モーダル機能（separation of concerns）を処理するために、別のコントローラを使用することをお勧めします。

コードの縮小をサポートするために依存性注入を使用することもお勧めします。 AngularチュートリアルのStep 5でこれを説明します。

モーダルコントローラの簡略化した例があります。

(function() { 

    'use strict'; 

    var app = angular.module('App'); 

    app.controller('musicDetailController', 

       ['$scope', '$uibModalInstance', 'items', 
     function ($scope, $uibModalInstance, items) { 

      $scope.items = items; 

     }]); 
}()); 

Answer 3

オブジェクトを直接渡すことはできません。

上記のすべてのソリューションを試しましたが、本当に満足しませんでした。私はstringsとobjectsの両方を、提供された解決関数を介してモーダルに直接渡すことができる単純なパーサを書くことでこの問題を解決しました。

app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) { 

    // Initialize $modal 
    var $modal = this; 

    // Open component modal 
    $modal.open = function (component, size, data) { 

     // Init modal 
     var modalInstance = $uibModal.open({ 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      component: component, 
      size: size || 'md', 
      resolve: parseResolve(data) 
     }); 
    }; 

    // Parse the resolve object 
    function parseResolve(data) { 
     if (typeof data === 'string') { 
      return { 
       data: function() { 
        return data; 
       } 
      } 
     } 
     else if (typeof data === 'object') { 
      var resolve = {}; 
      angular.forEach(data, function(value, key) { 
       resolve[key] = function() { 
        return value; 
       } 
      }) 
      return resolve; 
     } 
    } 

}]); 

---

ときusings列

テンプレート：

<button ng-click="$modal.open('modalSomething', 'md', 'value'"> 
    Click 
</button> 

コンポーネント：

bindings: { 
    resolve: '@' 
} 

---

の

使用してオブジェクト

テンプレート：

<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})"> 
    Click 
</button> 

コンポーネント：

私は以下のコードの作業だ

bindings: { 
    resolve: '<' 
} 

Answer 4

：

this.OpenModal = function() { 
     var modalInstance = $uibModal.open({ 
      url: "/name?parameter=" + $scope.Object.ParamValue, 
      templateUrl: 'views/module/page.html', 
      controller: myController 
     }); 
    }