当$ button和$点击按钮时显示div标签

我有两个控制器ParentController和ChildController。我想实现的是当ChildController的按钮被点击以发出事件并在ParentController中监听该事件并且单击按钮以显示div标签中的iframe时。你可以在下面找到我的代码。

ParentController

var myApp = angular.module("myApp", []); 

myApp.controller('ParentController', ['$scope', function ($scope) { 

}]);

* ChildController **

myApp.controller('ChildController', ['$scope', function ($scope) { 

}]);

信息查看ParentController

<div ng-controller="ParentController"> 
    <div class="module-content"> 
    <h3>Title</h3> 
    </div> 
    <div content-body> 
     <div ng-show="$on('showiframe')"> 
     <iframe ng-src={{url}} frameborder="0"></iframe> 
     </div> 
    </div> 
<div>

查看儿童控制器 显示的IFrame

所以我可以做这样的事情，听在NG-显示div标签的事件吗？

来源

2015-11-03 Bukic

在您的ChildController中，$在按钮单击时发出事件。 $ emit将通过范围层次结构向上分派事件。

子视图：

<button type="button" ng-click="showIframe()">Show iframe</button>

儿童控制器：

myApp.controller('ChildController', ['$scope', function ($scope) { 
    $scope.showIframe = function() { 
     $scope.$emit('showiframe'); 
    } 
}]);

在你父控制器，创建 'showIframe' 事件的监听器。

父视图：

<div ng-controller="ParentController"> 
    <div class="module-content"> 
    <h3>Title</h3> 
    </div> 
    <div content-body> 
     <div ng-show="showIframe"> 
     <iframe ng-src={{url}} frameborder="0"></iframe> 
     </div> 
    </div> 
<div>

父控制器：

var myApp = angular.module("myApp", []); 

myApp.controller('ParentController', ['$scope', function ($scope) { 
    // Iframe is not showed initially  
    $scope.showIframe = false; 

    $scope.$on('showIframe', function() { 
      $scope.showIframe = true; 
    }); 
}]);

编辑：

关于你的小提琴，例如，你可以看的inputText模型和发射事件：

$scope.$watch('inputText', function() { 
     $scope.$emit('send-date', $scope.date); 
     $scope.$emit('send-input', $scope.inputText); 
});

这会在每次inputText模型更改时发出事件。

来源

2015-11-03 13:46:21 Komo

谢谢@Komo。你可以看看这些小提琴http://jsfiddle.net/bF9Pq/695/的其他问题？我在ChildController中输入了文本和输入日期。我想要实现的是从ChildController中的这些输入中取值，并将它们传递给正在监听这些值的ParentController。此外，对于日期输入，我想将默认值设置为Date.now（），如果我从datepicker中选择其他日期，我想将该值发送给ParentController。 – Bukic

在您的小提琴中，您将在控制器init中发送发送日期和发送输入事件一次。你需要一个动作（例如按钮点击）（或$ watch）触发$ emit。看看我的编辑。 – Komo

非常感谢我的男人！所以现在我有点困惑，为什么我不能把$ scope.startDate和$ scope.getInputText的值从MainController的这两个函数中取出...我在开始时定义它们$ scope.startDate = null; $ scope.getInputText = null;然后在函数中为$赋值？ – Bukic

当$ button和$点击按钮时显示div标签

回答

相关问题