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

我要完成的是能够向模态框提供数据数据，以便它可以正确显示它。您可以在此处看到简单测试所在的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>

最佳答案

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

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

关于javascript - 如何将数据正确传递到范围外定义的模式框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31504941/