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

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

在我当前的学习项目中，我使用引导选项卡和模式框，这就是为什么我在代码开头定义了模式。在实际项目中，如果我在选项卡中定义了模式，它将不会正确显示，因此我需要在选项卡开始工作之前声明它

我希望，因为从控制器内部触发模态，模态上的指令可以访问数据，但似乎我错了。我试过几种方法，但都没能成功，这就是我寻求帮助的原因。我需要指令能够显示模态上的数据，就像它在控制器内部的指令测试中所做的那样。希望你们能帮忙

这是我期待的工作

<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>

A值：

B值：

//这里可以！

这里没有

<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.module（'app'，[]）
.controller（'dataInputCtrl'，函数（$scope，DataServ）{
//绑定到服务的数据
$scope.userData=DataServ.data；
}).factory（'DataServ'，函数（）{
返回{
数据：{}
};
}).directive（'renderItem'，函数（DataServ）{
返回{
限制：'E'，
模板：“A={{data.A}
B={{data.B}
”，
链接：功能（范围、要素、属性）{
//绑定到服务而不是从属性传递的数据
scope.data=DataServ.data
}
};
});

从长远来看，您仍然会发现使用angular ui引导的问题要小得多。它被大量使用和积极开发

---

最好的建议是去掉bootstrap.js并使用angular ui bootstrapThanks，我不得不做一些代码更改，但它非常适合我的需要。