angular-strap modal - 将变量传递到模态范围

Question

如何在angular-strap modal中传递变量？

需要将 item 参数传递到模态范围。

example.html :

<div class="container" ng-controller="ExampleCtrl">
    <br>
    <div class="row">
        <div class="col-sm-9 col-sm-offset-1">
            <div class="row jumbotron" ng-repeat="item in items">
                <div class="col-sm-8">
                    <h4>{{item.name}}</h4>
                </div>
                <div class="col-sm-2">
                      <button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Custom Modal
                      <br />
                      <small>(using data-template)</small>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

example.controller.js :

'use strict';

angular
    .module('MyApp')
    .controller('ExampleCtrl', ['$scope', '$modal',
        function ($scope, $modal) {
        var modal = $modal({
            scope: $scope,
            template: '../../views/example.tpl.html',
            show: false
        });
        $scope.showModal = function() {
            modal.$promise.then(modal.show);
        };
}]);

Answer 1

不太清楚你的问题是什么。 $modal 默认情况下与页面具有相同的范围 - 毕竟模式只是该页面上的一个元素。

所以scope: $scope完全没有必要。至于标记，"passing" $modal 的变量是直截了当的：

$scope.item = { name : 'Holy guacamole'};

"Holy guacamole" 将显示在模式中 <h4>{{ item.name }}</h4>

就我个人而言，我更喜欢创建一个专用于某个模态的对象 :

$scope.myModalData = {
     item : {
        name : 'Holy guacamole'
     }
}

<h4>{{ myModalData.item.name }}</h4>

如果您坚持使用自定义范围，请执行此操作：

var $modalScope = $scope.$new(true);
$modalScope.item = {
   name : 'Holy guacamole';
}

...

var modal = $modal({
   scope: $modalScope,
   template: '../../views/example.tpl.html',
   show: false
});

...

<h4>{{ item.name }}</h4>

angular-strap modal - 将变量传递到模态范围

angular-strap modal - pass variable into the modal scope

angularjs

angularjs-scope

angular-strap