왜 모달이 HTML에 값을 표시하지 않습니까?

Question

안녕하세요,이 plunker 만들었습니다 및 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'); 
}; 

})의 나머지 부분이고; 어떻게 해결할 수 있습니까? 당신은 두 개의 컨트롤러와 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