我失去了我的 $scope 价值答案

【问题标题】：I lose my $scope value我失去了我的 $scope 价值
【发布时间】：2016-07-15 01:25:26
【问题描述】：

我还是 angularJs 的新手，我正在尝试将一个变量的值从一个页面 html 传递到另一个页面（实际上是一个模式）。两个页面共享同一个控制器。请帮我诊断一下铅

Html Page1：

    <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>

【问题讨论】：

查看stackoverflow.com/a/33164461/178163 尝试像这样访问它，例如：{{$parent.product.price}}
通过 $parent 访问不是很好。您正在制作一个高度耦合的应用程序，这总是很糟糕。

标签： javascript angularjs

【解决方案1】：

从您的$modal.open 选项中删除controller option，这将为模态弹出窗口创建新的控制器实例，并在打开弹出窗口时忽略模态options 的scope : $scope 选项。

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

【讨论】：

【解决方案2】：

这是一个完整的 Bootstrap 模态并将变量从父级传递到模态控制器的示例。 Plunker Here

index.html

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angularjs@1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script data-require="angular-ui-bootstrap@1.1.2" 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;
});

【讨论】：

感谢您的回答。 Aculy 我删除了控制器名称，并在我的解决方案中添加了：{ selectedProducts : function(){ return selectedProducts; } 但第 2 页中仍然没有值
k.. 创建一个 plunker，我可以提供帮助。
所以从 Angular 设置的角度来看，plunker 有很多问题，所以我决定从头开始说明这个概念。我已经更新了上面的代码答案。
非常感谢您的时间和帮助！！

【解决方案3】：

感谢您的帮助！我可以解决这个问题，我不必在我的模态中定义控制器

【讨论】：