Question

我想要实现的目标是能够为模态框提供数据数据，以便正确显示它。你可以在这里看到简单测试所在的jsfiddle。

http://jsfiddle.net/GabrielBarcia/sjtog46f/1/

在我目前的学习项目中，我使用的是Bootstrap选项卡和模态框，这就是为什么我在代码的开头定义了模态。在实际项目中，如果我在选项卡中定义模态它没有正确显示，因此我需要在选项卡启动之前“声明”它才能工作。

我希望因为从控制器内部触发模态，模态上的指令可以访问数据，但看起来我错了。我尝试了几种方法，但无法使其正常工作，这就是我寻求帮助的原因。我需要该指令能够在控制器内部的指令测试中显示模态数据。希望你们能帮忙

这是我正在期待的工作

<div ng-controller="dataInputCtrl">
    <div>
        <p>value A :
            <input type="textbox" ng-model="userData.a"></input>
        </p>
        <p>value B :
            <input type="textbox" ng-model="userData.b"></input>
        </p>
    </div>
    <div>
        <render-item directivedata="userData"></render-item> //Here is ok!
    </div>

这不是

<div class="modal-body">
    <render-item directivedata="userData"></render-item> //here not ok
</div>

Answer 1

简单的解决方法是通过服务将数据绑定到控制器和模态指令

angular.module('app', [])
    .controller('dataInputCtrl', function ($scope, DataServ) {
    // data bound to service
    $scope.userData = DataServ.data;

}).factory('DataServ', function () {
    return {
        data: {}
    };

}).directive('renderItem', function (DataServ) {
    return {
        restrict: 'E',
        template: "<p> A = {{data.a}}</br>B = {{data.b}}</p>",
        link: function (scope, elem, attrs) {
            // data bound to service rather than passed from attribute
            scope.data = DataServ.data
        }
    };
});

从长远来看，你仍然会发现使用angular-ui-bootstrap的问题要少得多。它被大量使用和积极开发

DEMO

如何正确地将数据传递到范围外定义的模式框

1 个答案: