Question

单击外部按钮我需要设置模态的内部元素值。这两个元素都在不同的部分内，因此它们有不同的控制器，我需要一种方法将按钮值从mainCtrl传递到modalCtrl。

<div id="external-element" ng-controller="mainCtrl">
    <button ng-click="getValue($event)" data-value="1">Get this value</button>
</div>

<script id="modal.html" type="text/ng-template">
    <div id="modal-section" class="modal" ng-controller="modalCtrl">
        <p class="waiting-for-button-value"></p>
    </div>
</script>

经过一番研究后，我发现通过创建服务可以实现这一点：

app.factory('dataShare',function($rootScope){
    var service = {};
    service.data = false;
    service.sendData = function(data){
        this.data = data;
        $rootScope.$broadcast('data_shared');
    };
    service.getData = function(){
        return this.data;
    };
    return service;
});

为了让这些数据在我的控制器之间通话我做了这个：

app.controller('mainCtrl', function($scope, dataShare, $ionicModal){
    $scope.getValue = function(event){
        var myValue = $(event.target).data('value');
        dataShare.sendData(myValue);
    };
}

app.controller('modalCtrl', function($scope, dataShare){
    $scope.$on('data_shared',function(){
        var text =  dataShare.getData();
        $('.waiting-for-a-new-value').html(text);
    });
});

如果我忘记任何事情，请接受我的道歉，我对离子/角度新手很新。

Answer 1

如果您想与模态进行通信，则实际上不需要广播事件。模态可以存在于调用它们的视图中，因此它们共享相同的范围。

您使用data-value="1"和jQuery传递数据有什么特别原因吗？

angular give有这个绑定功能，允许你将项目/对象/值绑定到DOM中的每个元素：

app.controller('mainCtrl', function($scope){
    $scope.myValue = "this is a value";
    $scope.myObject = {name: 'Luca'};
    };
}

您可以使用ng-model的双重绑定绑定到文本框：

<input type="text" ng-model="myValue">
<input type="text" ng-model="myObject.name">

或单一绑定：

<input type="text" value="{{myValue}}">
<input type="text" value="{{myObject.name}}">

使用双重绑定$scope中的对象将保持同步，这意味着您将始终能够读取更新后的值。

回到你的模态。模态在控制器内创建，因此它们在技术上可以共享相同的范围。

你会做这样的事情来创建一个模态：

  $ionicModal.fromTemplateUrl('myModal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });

当承诺得到解决（.then()）后，创建的模态会保存在$scope中，以便以后只需调用openModal即可打开：

  $scope.openModal = function() {
    $scope.modal.show();
  };

正如我所说，视图和模态可以共享相同的范围，因此您的模态可能看起来像这样：

<ion-modal-view>
    <ion-header-bar>
      <h1 class="title">I am a modal</h1>
    </ion-header-bar>
    <ion-content>
      {{myObject.name}}
    </ion-content>
</ion-modal-view>

并显示您在textbox previousely中设置的值：

<input type="text" ng-model="myObject.name">

会立即更新。

您可以查看plunker。您可以设置模态的标题和正文。使用按钮打开模态时，新模态将显示您在视图中插入的值。

Ionic Js / Angular JS - 在模态和设定值中获取一个元素

1 个答案: