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

Question

我想要完成的是能够向模态框提供数据数据，以便它可以正确显示它。您可以在这里看到简单测试所在的 jsfiddle。

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

在我当前的学习项目中，我使用 Bootstrap 选项卡和模式框，这就是我在代码开头定义模式的原因。在实际项目中，如果我在选项卡内定义模式，则它不会正确显示，因此我需要在选项卡启动之前“声明”它才能工作。

我希望因为从 Controller 内部触发模式，模式上的指令可以访问数据，但看来我错了。我尝试了多种方法但无法使其工作，这就是我寻求帮助的原因。我需要该指令能够在模态上显示数据，就像在 Controller 内测试指令时一样。希望大家能够帮忙

这正如我所期望的那样工作

<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

简单的解决方法是通过服务将数据绑定(bind)到 Controller 和模式指令

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