Question

我想在模态弹出窗口中打开品牌细节。

我的模块在这里：

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

app.controller("BrandsCtrl", function($scope, $http, $controller) {
      $http.get('/admin.brands/getJSONDataOfSearch').
        success(function(data, status, headers, config) {
          $scope.brands = data;
        }).
        error(function(data, status, headers, config) {

        });
      angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
    });

app.controller("BrandCtrl",  function($scope, $http, $modal) {
  $scope.animationsEnabled = true;
  $scope.open = function (id) {
        var modalInstance = $modal.open({
          animation: $scope.animationsEnabled,
          templateUrl: '/admin.brands/edit',
          resolve: {
              item: function($scope, $http, id) {
                        $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id).
                         success(function(data, status, headers, config) {
                             return data;
                }).
                     error(function(data, status, headers, config) {
                })
            }
          }
        });
    }});

我的模态内容在这里：

<div class="row-fluid sortable">
    <div class="box span12">
        <div class="box-content">
        <form class="form-horizontal" action='/admin.brands/update' data-toggle="validate" method="post">
                <input type="hidden" name="brandid" value="{{item.brandid}}"/>
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">
                        <input name="name" value="{{item.name}}" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
                    </div>
                </div>
                <div class="form-actions">
                    <a href="/admin.brands" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <button type="submit" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></button>
                </div>
        </form>
    </div>
</div>
</div>

当我用

打开模态时

<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"><tags:label text="edit"/></a>

模式会打开，但没有名称或内容。

问题出在哪里？

是否还有其他方法可以根据url参数打开模态？

Answer 1

只需为模态对话框指定控制器即可。这样的事情。

var modalController = function($scope){
  (function(){
    // do some staff here
  })();
};
var modalOptions = {
  controller : modalController
};

$modal.open(modalOptions);

Answer 2

在解析器上试试这个：

{
    resolve: {
        item: function($http) {
            return $http.get('...')
                .then(function(response) {
                    return response.data;
                });
        }
    }
}

Answer 3

ng-click接受表达式，而不是模板。表达式中的{{...}} 无效。如果您想将brand.brandid变量传递给open()函数，只需执行：

<a ... ng-click="open(brand.brandid)"><tags:label text="edit"/></a>

Answer 4

##something like this##

$scope.open = function (id) {
        var modalInstance = $modal.open({
          animation: $scope.animationsEnabled,
          templateUrl: '/admin.brands/edit',
          controller: 'BrandsPopupController',      
          resolve: {
              item: function($scope, $http, id) {
                        $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id).
                         success(function(data, status, headers, config) {
                             return data;
                }).
                     error(function(data, status, headers, config) {
                })
            }
          }
});
// set modal popup controller
app.controller('BrandsPopupController', ['$scope','$modalInstance','item',function ($scope,$modalInstance,item) {
          $scope.item  = item;
 }]);

使用参数打开模态弹出窗口

4 个答案: