到UI引導模態

Question

綁定值I有一個視圖按鈕表，視圖被點擊模式顯示時，但現在我想在模態顯示某些數據。我使用的.html頁面。

我不知道我在這裏缺少

HTML

<td> 
    <span> 
     <input class="btn btn-sm btn-dark" data-ng-click="launch('create',client)" type="button" value="view" /> 
    </span> 
</td> 

這將luanch模態

莫代爾

<div class="modal fade in" ng-controller="dialogServiceTest"> 
<div class="modal ng-scope"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h4 class="modal-title"> 
        <span class="glyphicon glyphicon-star"></span> Client Details 
       </h4> 
      </div><div class="modal-body"> 
       <ng-form name="nameDialog" novalidate="" role="form" class="ng-pristine ng-invalid ng-invalid-required"> 
        <div class="form-group input-group-lg" ng-class="{true: 'has-error'}[nameDialog.username.$dirty &amp;&amp; nameDialog.username.$invalid]"> 
         <label class="control-label" for="username">Name:</label> 
         <input type="text" name="username" id="username" ng-model="client.ClientName" ng-keyup="hitEnter($event)" required=""> 
         <span class="help-block">Enter your full name, first &amp; last.</span> 
        </div> 
        <div>{{client.ClientName}}</div> 
       </ng-form> 
      </div><div class="modal-footer"> 
       <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button> 
       <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="(nameDialog.$dirty &amp;&amp; nameDialog.$invalid) || nameDialog.$pristine" disabled="disabled">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 

角

angular.module('modalTest', ['ngRoute','ui.bootstrap', 'dialogs']) 
.controller('dialogServiceTest', function ($scope,$http, $rootScope, $timeout, $dialogs) { 
    $scope.clients = []; //Array of client objetcs 
    $scope.client = {}; //Single client object 

    $scope.launch = function (which,client) { 
     var dlg = null; 

     alert(client.ClientName); 
     dlg = $dialogs.create('/templates/Modal.html', 'whatsYourNameCtrl', {}, { key: false, back: 'static' }); 
     dlg.result.then(function() { 
       $scope.client.ClientName = client.ClientName; 
    }); 
}) 
.run(['$templateCache', function ($templateCache) { 
    $templateCache.put('/templates/Modal.html'); 
}]); 

Answer 1

您可以通過使用「$ $範圍parent.client。」存取權限的模式，客戶端 - 「$父」給你$範圍從女巫的模式與所有數據開放。

Answer 2

我想你要找的是resolve屬性，你可以使用$modal服務。我不清楚自己所使用的UI引導的版本，但最新的一個工作原理如下：

var myModal = $modal.open({ 
    templateUrl: '/some/view.html', 
    controller: 'SomeModalCtrl', 
    resolve: { 
     myInjectedObject: function() { return someObject; } 
    }); 
myModal.result.then(function(){ 
    // closed 
}, function(){ 
    // dismissed 
}); 

那麼你可以使用的模態控制器內注入解析值：

app.controller('SomeModalCtrl', function ($scope, $modalInstance, myInjectedObject) { 
    // use myInjectedObject however you like, eg: 
    $scope.data = myInjectedObject; 
}); 

Answer 3

這裏是我的一些代碼

$scope.showScreenSizePicker = function(){ 
     $scope.actionmsg = ""; 
     var modalWindow = $modal.open({ 
      templateUrl: '{{url()}}/modals/modalScreenSizePicker', 
      controller: 'modalScreenSizePickerController', 
      resolve: { 
      titletext: function() {return "Screen Sizes: ";}, 
      oktext: function() {return "Close";}, 
      canceltext: function() {return "Cancel";}, 
      labeltext: function() {return "";}, 
      }}); 
    modalWindow.result.then(function(returnParams) { 
     $scope.setViewSize(returnParams[0], returnParams[1]); 
    }); 
} 

你可以看到我通過變量傳遞到模態使用決心。如果你想傳遞的值與模態回來，你可以抓住變量returnParms（陣列）

這裏是我的控制器代碼：

angular.module('myWebApp').controller('modalScreenSizePickerController', function($scope, $modalInstance, titletext, labeltext, oktext, canceltext) { 
     $scope.titletext = titletext; 
     $scope.labeltext = labeltext; 
     $scope.oktext = oktext; 
     $scope.canceltext = canceltext; 
     $scope.customHeight = 800; 
     $scope.customWidth = 600; 
     $scope.selectCustomSize = function(width, height){ 
     if (width < 100){ width = 100; } 
     if (height < 100){ height = 100; } 
     $scope.selectItem(width, height); 
     } 
     $scope.selectItem = function(width, height) { 
     var returnParams = [width, height]; 
      $modalInstance.close(returnParams); 
     }; 
     $scope.cancel = function() { 
     $modalInstance.dismiss(); 
     }; 
    }); 

希望我的樣本有助於