Angularjs：如何将动态值传递给模态？

Question

我正在尝试通过单击按钮将动态参数传递给模态，但有些值没有到位，总是返回一个空值。

这是我的模态 sn-p：

<div id="<%handler%>" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"><%header%></h4>
            </div>
            <div class="modal-body">
                <p><%body%></p>
                <form class="form main_grid_contact" name="orderForm">
                    <input type="hidden" name="order" value="<%orderPublic%>">
                    <div class="form-group">
                        <input class="form-control" type="text" name="fullname" placeholder="Fullname">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="text" name="telephone" placeholder="Telephone">
                    </div>
                    <div class="form-group">
                        <input class="form-control" type="email" name="pass" placeholder="E-mail">
                    </div>
                    <div class="input-group1">
                        <input type="submit" name="order" class="form-control" value="Order">
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger btn-block" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

我创建了一个指令，可以很容易地弹出模式：

app.controller('orders.controller', function ($scope, $log) {
    $scope.header = '';
    $scope.body = '';
    $scope.footer = '';
    $scope.orderPublic = '';
    $scope.addProduct = function (orderId) {
        $scope.orderPublic = orderId;
    }
});
app.directive('modal', function () {
    return {
        restrict: 'EA',
        scope: {
            title: '=modalTitle',
            header: '=modalHeader',
            body: '=modalBody',
            footer: '=modalFooter',
            callbackbuttonleft: '&ngClickLeftButton',
            callbackbuttonright: '&ngClickRightButton',
            handler: '=lolo'
        },
        templateUrl: '/static/snippets/modal.html',
        transclude: true,
        controller: function ($scope) {
            $scope.handler = 'pop';
        },
    };
});

这里是控制器：

<div class="row" id="ads" ng-controller="orders.controller">
    <div class="col-md-4">
        <div class="card rounded">
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord LX</h5>
                </div>
                <a href="#<%modal1%>" ng-click="addProduct('02f73a06-163a-4d6f-8ca7-c6bac8ca7a46')" role="button" data-toggle="modal" class="ad-btn">View</a>
            </div>
        </div>
    </div>
</div>

<modal lolo="modal1" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal>

模态弹出成功，范围参数除了orderPublic外，隐藏输入为空，即使我将其传递给函数，我也可以在控制台中看到传递的值

Answer 1

替换<% %> with {{}}如下 <input type="hidden" name="order" value="{{orderPublic}}">

或 <input type="hidden" name="order" ng-model="orderPublic">

Answer 2

所以，我解决了这个问题。

我只想在指令中创建另一个范围变量并为其分配一个随机值，因此它将位于我的 $scope 变量中，然后当点击发生时我可以更改该随机值到传递的参数。

解决办法如下：

一个新的模态指令属性model-order

<modal lolo="modal1" modal-order="order" modal-body="body" modal-footer="footer" modal-header="header" data-ng-click-right-button="myRightButton()"></modal> 

<script>
    app.controller('orders.controller', ['$scope', '$log', 
    function($scope, $log){
        $scope.header = '';
        $scope.body = '';
        $scope.footer = '';
        $scope.order = "XXXX-XXXX-XXXX-XXXX-XXXX";
        $scope.addProduct = function (orderId) {
            $scope.order = orderId;
        }
    }]);

    app.directive('modal', function () {
        return {
            restrict: 'EA',
            scope: {
                title: '=modalTitle',
                header: '=modalHeader',
                body: '=modalBody',
                footer: '=modalFooter',
                callbackbuttonleft: '&ngClickLeftButton',
                callbackbuttonright: '&ngClickRightButton',
                handler: '=lolo',
                order: '=modalOrder'
            },
            templateUrl: '/static/snippets/modal.html',
            transclude: true,
            controller: function ($scope) {
                $scope.handler = 'pop';
            },
        };
    });
</script>

Answer 3

如果你想显示值使用

 value="{{orderPublic }}"    

如果你需要两种方式的数据绑定使用

ng-model="orderPublic"

以下是完整代码

<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="orderPublic">
<h1>You entered: {{orderPublic }}</h1>
<input name="order" value="{{orderPublic }}">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.orderPublic  = 1;
});
</script>

</body>
</html>