私の$スコープの値を失う

私はまだangularJsで新しいです。私は、変数の値を別のページ（実際にはモーダル）に渡そうとしています。

<button type="submit" class="btn btn-primary pull-right" 
         data-ng-click="ctrl.nextOperation(chosenProducts,'lg')">Next</button> 
       </div>

app.js：

self.nextOperation = function(chosenProducts,size) 
{ 
    $scope.chosenProducts= chosenProducts; 
    $scope.product = chosenProducts[0]; 
    console.log($scope.product.nameProduct); 
    console.log("test test nextt Operation "+chosenProducts[0].nameProduct);  
    var modalInstance = $uibModal.open({ 
     animation : $scope.animationsEnabled, 
     templateUrl : 'partials/operation.html', 
     controller : 'ProductsController', 
     scope : $scope, 
     size : size, 
     resolve : { 
         } 
    }); 

};

ページ2：

<table> 
      <tbody> 

       <tr class="cake-bottom" > 
       <td class="cakes">     
        <div class="product-img2"> 
        </div> 
       </td> 
       <td class="cake-text"> 
        <div class="product-text"> 
         <h3>{{product.nameProduct}}</h3> 
         <p>Product Code: {{product.numSerie}}</p> 
        </div> 
       </td> 
       <td class="quantity">     
        <div class="product-right"> 
        <input min="1" type="number" id="quantity" name="quantity" value="" class="form-control input-small">     
        </div> 
       </td> 
       <td> 
        <h4>{{product.price}}</h4> 
       </td> 
       <td class="btm-remove"> 
       <div class="close-btm"> 
        <h5>Remove</h5> 
       </div> 
       </td> 


       </tr> 
      </tbody> 
     </table>

出典

2016-03-27 yeddez

これを参照してくださいhttp://stackoverflow.com/a/33164461/178163ようにアクセスしてみてください：{{$ parent.product。価格}} –

$ parent経由でのアクセスはあまり良くありません。あなたはいつも悪いハイカップリングのアプリケーションを作っています。 –

ここでは、Aの完全な例である私は、PBください

HTML形式のPage1を診断するのに役立つだろうモーションをブートストラップし、親からモーダルコントローラに変数を渡します。 Plunker Here

index.htmlを

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
    <script data-require="[email protected]" data-semver="1.1.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="my-app"> 
    <div ng-controller="myController as mc"> 
     <h1>Hello Plunker!</h1> 
     <br><br> 
     myObject = {{mc.myObject}} 
     <a ng-click="mc.openModal(mc.myObject)">Open Modal</a> 
    </div> 
    </body> 

</html>

myModalContent.html

<h2>I am a modal</h2> 
{{modal.myObject}}

script.js

var myApp = angular.module('my-app', ['ui.bootstrap']); 

myApp.controller('myController', function($uibModal) { 
    var self = this; 
    self.myObject = {id: 1, value: "Hello"}; 
    self.openModal = function (size) { 
    var modalInstance = $uibModal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl as modal', 
     size: size, 
     resolve: { 
     // Any properties here become injected as arguments on the modal controller. 
     items: function() { 
      return self.myObject; 
     } 
     } 
    }); 
    }; 
}); 

// items is injected from the resolve property of the parent controller instantiating the modal. 
myApp.controller('ModalInstanceCtrl', function(items) { 
    var self = this; 
    self.myObject = items; 
});

出典

2016-03-27 18:56:19

あなたの答えに感謝します。 Acualy私は、コントローラ名を削除し、私は私の決意の解決に追加しました：{ \t \t \t \t chosenProducts：機能（）{ \t \t \t \t戻りchosenProducts。 \t \t \t \t \t}しかし、まだ2のページの値はありません – yeddez

k。プランナーを作成してください。私は助けることができます。 –

ここにあります：https://plnkr.co/edit/EzVVe3Mzt4HTSPEcrH4k?p=preview – yeddez

$modal.openオプションからcontrolleroptionを削除します。これは、モーダルポップアップ&の新しいコントローラインスタンスを作成して、scope : $scopeのオプションを無視して、ポップアップを開く間にoptionsのオプションを削除します。

var modalInstance = $uibModal.open({ 
    animation : $scope.animationsEnabled, 
    templateUrl : 'partials/operation.html', 
    //controller : 'ProductsController', //<-- remove controller name 
    scope : $scope, 
    size : size 
});

出典

2016-03-27 19:01:48

ありがとうございました！私は問題を解決することができた、私は自分のモーダルでコントローラを定義しなければならなかった

出典

2016-03-28 08:46:42 yeddez

私の$スコープの値を失う

答えて

関連する問題