AngularJS UI Bootstrap模式共享信息到同一控制器

Question

I have the following modal set up in my cloud controller. I'm not giving this modal a specific controller to work off of because the goal is to share it with my cloud controller.

I don't tell the modal that it should be using the cloud controller because then the controller will get run twice, and I do not want this to happen.

.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);
    }

})

The issue I am trying to solve is with an input box in my modal template. I am trying to submit the text, have it be shared, and hopefully updated to one of my $scope variables inside the cloud controller.

Below you can see my modal.html where on submit, it runs the submit() function in my cloud controller. It run's successfully but the console log returns undefined for both $scope.inputData and data .

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

Could anyone help me figure out what I am doing wrong or how I can get this data over to my current cloud controller?

Answer 1

A BIG shoutout to camden_kid for catching my mistake of misspelling ng-model . I accidentally did ng-modal .

Just correcting that spelling didn't fix it though.

I don't know why (maybe someone can help explain), but I had to use an object that was already created to get this to work. Just using a variable that was pre-defined didn't work.

So this is my change in my cloud controller:

.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);
    }

})

And then I did the following to my html:

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