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

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

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

How to correctly pass data to a modal box defined outside the scope

javascript

twitter-bootstrap

angularjs

bootstrap-modal