Question

如何在角度模式中传递变量？

需要将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完全不受欢迎。至于标记，将变量“传递”到$modal是直截了当的：

$scope.item = { name : '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 - 将变量传递到模态范围

1 个答案: