なぜモーダルはHTMLの値を表示しませんか？

Question

こんにちは私はこのプランナーを作成しました、そして、私は、HTMLの機能usmanの値を印刷しようとしています。しかし、それは何かが不足して推測を示していない？

[My plunker][1] 

私は値を取得していますし、値の後に私はモーダルするためにこれらの値を渡すAMどこからDashboardcontroller内の関数を持っています。

$scope.view_product = function (id) { 
     console.log(id); 
     $http.get('http:', 
       {headers: 
          {'Content-Type': 'application/x-www-form-urlencoded', 
           'Authorization': $rootScope.keyword_auth_token} 
       }) 
       .success(function (data) { 
        $scope.data_vp = data; 
        $scope.price = data.product_variants[0].price; 
        $scope.name = data.name; 
        $scope.variants = data.product_variant_options; 
        $scope.language_id = data.language_id; 
        console.log($scope.data_vp); 
        if ($scope.data_vp) 
        { 
         ctrl.open(); 
        } 
       }) 
       .error(function (data) { 
        console.log(data); 
       }); 
    }; 

及びIは、HTML

`<div class="modal-header"> 
    <h3 class="modal-title" id="modal-title">Update Product</h3> 
</div> 
<div class="col-md-12 col-xs-12 col-sm-12 modal-body" id="modal-body" ng-controller="DashboardController"> 
    <form class="col-md-8 col-xs-12 col-sm-12" ng-submit="add_product()" enctype="multipart/form-data"> 
     <div class="col-md-12 col-sm-12 col-xs-12 form-group"> 
      <label for="language_id">Select language:</label> 
      <select name="language_id" class="register mg-bt-15 wid-100-p" required> 
       <option ng-model="language_id" value="1">English</option> 
       <option ng-model="language_id" value="2">Arabic</option> 
      </select> 
     </div> 
     <p> This is testing {{abc}}</p> 
     <div class="col-md-12 col-sm-12 col-xs-12 form-group"> 
      <label for="item_name">Item Name:</label> 
      <input class="form-control" ng-model="name" id="name" type="text" required> 
     </div> 
     <div class="col-md-12 col-sm-12 col-xs-12 form-group"> 
      <label for="item_price">Item Price:</label> 
      <input class="form-control" ng-model="price" id="item_price" type="text" required> 
     </div> 
     <div data-ng-repeat="variant in variants" class="col-md-12 col-sm-12 col-xs-12 form-group"> 
      <label for="text">{{variant.variant_name}}:</label> 
      <input type="text" class="form-control" ng-model="variant.variant_value"> 
     </div> 

     <div class="col-md-12 col-sm-12 col-xs-12 form-group"> 
      <hr/> 
      <div class="btn btn-primary" ngf-select="uploadFiles($files)" multiple 
       accept="image/*">Select Files</div> 
      <ul> 
       <li ng-repeat="f in files" style="font:smaller"> 
        {{f.name}} 
       </li> 
      </ul> 

      <ul id="product_uplaoded_images"> 
       <li ng-repeat="img in path" style="font:smaller"> 
        <img ng-src="http://35.160.167.13/online-malls/common/upload/productpic/{{img}}" alt="upload_image"> 
        <span class="badge" ng-click="remove_upload_img($index)"><i class="fa fa-minus"></i></span> 
       </li> 
      </ul> 
      <span class="progress" ng-show="progress >= 0"> 
       <div style="width:{{progress}}%" ng-bind="progress + '%'"></div> 
      </span> 
      {{errorMsg}} 
      <hr/> 
     </div> 

     <div class="aa-single-submit form-group"> 
      <input class="btn btn-success mg-10" type="submit" value="Update Product" name="submit">     
     </div> 
    </form> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" type="button" ng-click="ctrl.ok()">OK</button> 
    <button class="btn btn-warning" type="button" ng-click="ctrl.cancel()">Cancel</button> 
</div>` 

の値を使用していますし、これはまた、controller

ctrl.open = function (size, parentSelector) { 

     var parentElem = parentSelector ? 
       angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
     var modalInstance = $uibModal.open({ 
      animation: ctrl.animationsEnabled, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl', 
      controllerAs: 'ctrl', 
      size: size, 
      appendTo: parentElem 

     }); 

     modalInstance.result.then(function() { 

     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 


    }; 
    ctrl.toggleAnimation = function() { 
     ctrl.animationsEnabled = !ctrl.animationsEnabled; 
    }; 
angular.module('mainControllers').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) { 
var ctrl = this; 

ctrl.ok = function() { 
    $uibModalInstance.close(); 
}; 

ctrl.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
}; 

}）の残りの部分です。 どうすれば解決できますか教えてください。次の2つのコントローラとModalInstanceControllerを使用している

Answer 1

あなたはModalDemoCtrlコントローラであなたの価値を持っていたとして、モーダル値、責任です。

ここであなたのプランカーは働いています。 Plunk

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', 
function ($scope,$uibModalInstance) { 
    var ctrl = this; 
    $scope.abc="DONE";//// modified here 
    ctrl.ok = function() { 
    $uibModalInstance.close(); 
    }; 

    ctrl.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

代替オプションは

ctrl.open = function (size, parentSelector) { 
    var parentElem = parentSelector ? 
     angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
    var modalInstance = $uibModal.open({ 
     animation: ctrl.animationsEnabled, 
     ariaLabelledBy: 'modal-title', 
     ariaDescribedBy: 'modal-body', 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalDemoCtrl', 

     size: size, 
     appendTo: parentElem 

    }); 

以下のようにベースコントローラとしてModalDemoCtrlを有し、このデモのように）（ウスマン外方法スコープ要素を有することであるPlunk