【问题标题】:Angularjs ui bootstrap modal sharing information to same controllerAngularjs ui引导模式共享信息到同一个控制器
【发布时间】:2015-05-14 01:00:50
【问题描述】:

我在cloud 控制器中设置了以下模式。我没有给这个模式一个特定的控制器来工作,因为目标是与我的云控制器共享它。

我没有告诉模态它应该使用云控制器,因为控制器会运行两次,我不希望这种情况发生。

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
        .state('cloud', {
            url: '/cloud',
            controller: 'cloud',
            templateUrl: 'pages/templates/cloud.html'
        })
})

.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {

    $scope.toggleModal = function () {
        $scope.renameModal = $modal.open({
            animation: true,
            templateUrl: 'pages/templates/modal.html',
            size: "md",
            scope: $scope
        });
    }

    $scope.submit = function(data) {
        console.log($scope.inputData, data);
    }

})

我要解决的问题是我的模态模板中的输入框。我正在尝试提交文本,将其共享,并希望将其更新为云控制器内的$scope 变量之一。

您可以在下面看到我的 modal.html 在提交时,它在我的云控制器中运行 submit() 函数。它运行成功,但控制台日志为 $scope.inputDatadata 返回 undefined

<div class="modal-header">
    <h3 class="modal-title">title</h3>
</div>
<div class="modal-body">
    <input type="text" id="rename_item" ng-modal="inputData" value="" />     
</div>
<div class="modal-footer">
    <button class="btn_submit fade" ng-click="submit(inputData)">Rename</button>
</div>

谁能帮我弄清楚我做错了什么或如何将这些数据传输到我当前的云控制器?

【问题讨论】:

  • 输入属性不应该是ng-model not ng-modal吗?
  • 另外,您可以只拥有:$scope.submit = function() {console.log($scope.inputData);}ng-click= “提交()”
  • @camden_kid 不错的收获!但ng-model 仍然带来 undefined

标签: javascript angularjs angular-ui-router angular-ui-bootstrap


【解决方案1】:

BIG 向 camden_kid 大声疾呼,感谢我发现我拼写错误的 ng-model。我不小心做了 ng-modal

只是纠正拼写并不能解决问题。

我不知道为什么(也许有人可以帮助解释),但我必须使用一个已经创建的对象才能让它工作。仅使用预定义的变量是行不通的。

这是我对云控制器的更改:

.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {

    $scope.toggleModal = function () {
        $scope.renameModal = $modal.open({
            animation: true,
            templateUrl: 'pages/templates/modal.html',
            size: "md",
            scope: $scope
        });
    }

    $scope.inputText = {data: ""};
    $scope.submit = function(data) {
        console.log($scope.inputText.data);
    }

})

然后我对我的 html 做了以下操作:

<input type="text" ng-modal="inputText.data" />  

【讨论】:

  • 原因是模态有一个孤立的范围。您必须使用 close 方法,这将传递一个在模式关闭时解决的承诺。查看模态文档中的演示 Plunker:angular-ui.github.io/bootstrap/#/modal
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多