angularjs selft $broadcast and $on
angularjs selft $broadcast and $on
我已经创建了类似于下拉列表的自定义指令,但在我的情况下,项目在模态弹出窗口中打开,选择项目后将在div 中选择。
现在我添加了两个指令(即同一指令的两个实例),并使用这两个指令作为父子方式工作。我正在从 rest api 获取项目,然后分配给第一个指令(即父指令),并且根据第一个指令的选择,我正在过滤另一个 rest api,然后分配给第二个指令(即子指令),效果非常好。但是每当更改第一个指令的选择时,我想重置第二个指令的值(选定项)。
我在指令中添加了以下代码,但它对我没有帮助
controller: ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.$watch('value', function(val) {
$rootScope.$broadcast('valueChanged', $scope.id);
});
$scope.psChanged = function() {
$scope.$on('valueChanged', function(event, value) {
if (value === $scope.id) {
//Do nothing.
} else {
console.log("Text change");
}
});
}
}
]
My full working plunker
http://plnkr.co/edit/f6LYS2aGrTXGkZ3vrIDD?p=preview
有人可以帮我完成它吗!
我在隔离的作用域中添加了一个属性,称为isChild,当它是真的时,我正在侦听事件值Changed。所以我甚至在没有函数 psChanged 的控制器中绑定了侦听器,它可以工作。
angular.module('plexusSelect', []).directive('plexusSelect', ['$ionicModal', '$timeout', '$ionicScrollDelegate', '$rootScope',
function($ionicModal, $timeout, $ionicScrollDelegate, $rootScope) {
// Runs during compile
return {
scope: {
'items': '=',
'id': '@',
'text': '@',
'textIcon': '@',
'headerText': '@',
'textField': '=',
'valueField': '@',
'callback': '&',
'isChild' : '@'
},
require: 'ngModel',
restrict: 'E',
templateUrl: 'plexusSelect.html',
controller: ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.$watch('value', function(val) {
$rootScope.$broadcast('valueChanged', $scope.id);
});
if ($scope.isChild === 'true') {
//$scope.psChanged = function() {
$scope.$on('valueChanged', function(event, value) {
if ($scope.id === value) {
//Do nothing.
} else {
$scope.clearSearch();
$scope.value = '';
$scope.text = $scope.defaultText;
console.log("Text change");
}
});
}
}
],
.html
<ion-view view-title="Search" ng-controller='SearchCtrl'>
<ion-content>
<h1>Search</h1>
<plexus-select id="psDeparture" is-child='false' items="deptStations" header-text="Select Departure Station" text="Select departure..." text-icon="icon-takeoff" text-field="['City_Name_EN','City_Code']" value-field="City_Code" ng-model="deptStation.value"></plexus-select>
<plexus-select id="psArrival" is-child='true' items="arrStations" header-text="Select Arrival Station" text="Select arrival..." text-icon="icon-landing" text-field="['Destination.City_Name_EN','Destination.City_Code']" value-field="Destination.City_Code" ng-model="arrStation.value"></plexus-select>
</ion-content>
</ion-view>
扑通克
相关文章:
- iframe and JavaScript on different pages
- geolocation with javascript and ruby on rails
- $rootScope.$emit and $on
- angularjs selft $broadcast and $on
- jquery .sortable() on <div> store and retrieve
- Javascript genreate removeChild and appendChild on click
- Jasmine fixtures and jQuery .on()
- cfselect bind and jquery on events clashing
- jQuery .on and .trigger
- window.location.href on Safari and Chrome
- Spy on setTimeout and clearTimeout in Karma and Jasmine
- Getters and Setters on angular.extend $scope
- NodeJS and express, ENOENT on view file
- jquery val(); function and ruby on rails
- async.parallel on mongodb and Node.js
- AJAX and setTimeout on Internet Explorer
- jQuery .on() syntax and event.preventDefault()
- Using the jquery .on() and $.ajax
- On and Off事件不能很好地工作
- jQuery Combining on() and addClass()