是否有可能让一个控制器使用另一个？
例如:
此HTML文档只是打印MessageCtrl控制器在messageCtrl.js文件中传递的消息.
<html xmlns:ng="http://angularjs.org/">
<head>
<meta charset="utf-8" />
<title>Inter Controller Communication</title>
</head>
<body>
<div ng:controller="MessageCtrl">
<p>{{message}}</p>
</div>
<!-- Angular Scripts -->
<script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
<script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>
控制器文件包含以下代码:
function MessageCtrl()
{
this.message = function() {
return "The current date is: " + new Date().toString();
};
}
这只是打印当前日期;
如果我要添加另一个控制器,DateCtrl它将日期以特定格式交还给MessageCtrl,那怎么会这样做呢？DI框架似乎关注XmlHttpRequests和访问服务.
试图找到AngularJS的一些基本信息$rootScope.$broadcast,但AngularJS文档没有多大帮助.简单来说,我们为什么要使用它？
此外,在John Papa的Hot Towel模板中,公共模块中有一个名为的自定义函数$broadcast:
function $broadcast() {
return $rootScope.$broadcast.apply($rootScope, arguments);
}
我不明白这是做什么的.所以这里有几个基本问题:
1)做$rootScope.$broadcast什么？
2)$rootScope.$broadcast和之间有什么区别$rootScope.$broadcast.apply？
首先单击状态时,拥有"ui-view"属性的div将替换为该状态的"模板".但是,当我再次单击相同的状态时,其控制器不会重新加载.如何让此控制器再次加载？
例如,假设我有以下导航菜单:
<nav>
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
</nav>
我的"ui-view"内容如下:
<div ui-view></div>
我的州描述如下.当我点击导航菜单上的"状态1",我希望看到的文本"Ctrl 1 loaded"上developer console.如果这是第一次,那么我会观察那个文字.但是,当我重新单击相同的链接时,控制器没有再次加载,我无法看到"Ctrl 1 loaded"控制台上显示的文本两次.
myApp.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("state1", {
url: "#",
template: "<p>State 1</p>",
controller: "Ctrl1"
}).state("state2", {
url: "#",
template: "<p>State 2</p>",
controller: "Ctrl2"
});
});
为什么？你有什么主意吗？
我正在尝试在选择项目时发送事件,从指令到控制器使用$emit.我有两个组织更新功能,另一个用于人员.我的指令应该指定应该发出哪个事件.
这是我的更新功能
//对于组织
$scope.updateOrgs = function(selectedVal) {
}
//对于人
$scope.updatepeople = function(selectedVal, type) {
}
如果是人,我的指令应该为一个发出事件updatepeople (),如果它是org它应该加注updateorg().
我的指令看起来像......
.directive('search', function ($timeout) {
return {
restrict: 'AEC',
scope: {
model: '=',
searchobj: '@',
},
link: function (scope, elem, attrs, index) {
scope.handleSelection = function (selectedItem) {
scope.model = selectedItem;
scope.searchModel="";
scope.current = 0;
scope.selected = true;
$timeout(function () {
scope.onSelectupdate();
}, 200);
};
scope.Delete = function (index) {
scope.selectedIndex = index;
scope.delete({ index: index }); …我有以下设置:
stApp.controller('AdminTableController', ['$rootScope', '$scope', 'gridService',
function ($rootScope, $scope, gridService) {
$scope.$watch('tableData.$pristine', function (newValue) {
$rootScope.broadcast("tableDataUpdated", {
state: page.$pristine
});
});
}])
stApp.controller('AdminGridController', ['$rootScope', '$scope', 'gridService',
function ($rootScope, $scope, gridService) {
$rootScope.on("tableDataUpdated", function (args) {
//args.state would have the state.
alert(args.state);
});
}])
当我运行此代码时,我收到一条消息:
Object #<Object> has no method 'on'
请注意,我尝试使用$ rootScope.on和$ scope.on
在一个控制器中我做:
$rootScope.$emit("newAction", {});
在另一个控制器我做:
$rootScope.$on('newAction', function() {
vm.newAction (...);
vm.newAction (...);
vm.newAction (...);
vm.newAction (...);
vm.newAction (...);
vm.newAction (...);
});
我的问题是多次调用$ rootScope.$ on.我不知道为什么.
如果有人有提示......谢谢
我已经看到了很多与此事有关的问题,但我尝试过的解决办法是:
在文件夹public中我有一个名为app.js的文件,我在这里定义我的AngularJS应用程序:
var app = angular.module('app', []);
var RectangleDim=30;
app.controller('MainCtrl', function($scope, $http) {
在文件的最后,我做的引导如下:
angular.bootstrap(document.getElementById('body'), ["app"]);
然后,在同一文件夹内和HTML内部,我对AngularJS应用程序的入口点是这样的:
<div id="body">
<div ng-controller="MainCtrl">
<div class="col-sm-6 col-md-6 col-lg-6" style="background-color: #D2D7D3">
<div style="padding:25px;">
然后,在另一个文件夹上,我有另一个JS文件,我需要调用AngularJS代码中定义的特定函数.该函数名为Draw(),当我单击AngularJS按钮时会触发它.
要简单地在另一个文件中调用该函数而不点击任何按钮我正在做这样的事情:
var e = document.getElementById('body');
var scope = angular.element(e).scope();
// update the model with a wrap in $apply(fn) which will refresh the view for us
scope.$apply(function() {
scope.Draw(NumQuest);
});
//fim
编辑:为了使我的问题更清楚,我可以添加一些细节:
我只需要一个控制器和一个模块来控制我的整个应用程序,因为所需的所有操作(调用3个更新SVG图片的函数)是相对自包含的,所以我认为没有必要添加客户端代码的复杂性,这可能会让我和其他与我合作的人感到困惑.
回忆一下我需要的东西:
在一个应用程序中,有一个控制器,我有一个函数,Draw(someInputValue),它生成一个SVG图形.正在从文本输入框接收此功能的输入.
在另一个文件中,我有点击另一个文本框时执行的JS操作(例如,显示警告或创建其他文本框).我想要的是在单击文本框时将调用与Draw(输入)相关联.
也就是说,我想模拟当我点击一个从文本框中读取数字并执行某些操作的按钮时的行为,而是在文本框中手动输入输入并单击按钮,我只想单击一个文本框并执行相同的操作.
Plnkr 示例构建：http ://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview
按照此处的答案，我创建了一些$broadcast事件以允许 main$scope中的操作关闭 sub 中的弹出窗口$scopes。但是，我想确保我清理了所有事件，并且没有任何不该留下的东西。
我有一个 popover 指令，一旦 popover 被激活，我就会发出：
vs.$emit('popoverOpen');
然后在主应用模块（$rootScope）中，我在这里听：
vs.$on('popoverOpen',function(events,data) {
// if 'popoverOpen' is heard, then activate this function
// which on click $broadcasts out even 'bodyClick'
// but also destroy the 'popoverOpen' event
vs.bodyClick = function() {
$rootScope.$broadcast('bodyClick');
$rootScope.$$listenerCount.popoverOpen=[];
};
});
回到 popover 指令，这是我的bodyClick听众：
vs.$on('bodyClick', function() {
vs.searchPopoverDisplay = false;
$rootScope.$$listenerCount.bodyClick=[];
});
^ 我也有代码试图终止该bodyClick事件，但无济于事:(
正如你可以看到下面，我已经删除bodyClick，并popoverOpen从$$listenerCount（有一个在没有什么有 …
我有这种情况
两个文件,都在同一个应用程序中
var app = angular.module('myapp');
文件一是父母,我有:
app.controller("ControllerOne", ['$scope', '$http', '$modal',
function ($scope, $http, $modal) {
$scope.$on('refreshList', function (event, data) {
console.log(data);
});
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: '/SomeFolder/FileWithControllerTwo',
controller: 'ControllerTwo',
size: 'lg',
resolve: {
someParam: function () {
return "param"
}
}
});
}
}]);
文件二是孩子,我有:
app.controller("ControllerTwo", ['$scope', '$http', 'someParam',
function ($scope, $http, someParam) {
$scope.SaveSomething = function () {
$http.post(url, obj)
.success(function (data) {
$scope.$emit('refreshList', [1,2,3]);
}).error(function () {
});
};
}]);
假设我可以打开模态,我可以"SaveSomething". …
我们对此很新.最后设法让ui-Bootstrap使用日期控件: -
<div class="col-md-2 box" ng-controller="ResultFilter" >
<h2>Filter</h2>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<select class="form-control" ng-model="resultfilter.frequency">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
</p>
</div> …我试图从这篇文章中获得提示 - 使用$ scope.$ emit和$ scope.$ on 但是当控制器彼此无关时,似乎没有任何工作.
那是 -
<div ng-controller="CtrlA">
</div>
<div ng-controller="CtrlB">
</div>
在CtrlB中我会做这样的事情:
$rootScope.$broadcast('userHasLoggedIn', {})
在CtrlA中,我会这样听:
$rootScope.$on('userHasLoggedIn, function(event, data){});
并且没有 - 除非我在CtrlA div中嵌入CtrlB div,否则CtrlA永远不会收到广播事件
任何的想法？
何时使用$scope.$on和$scope.emit开angular？我想了解更多关于在角度和使用事件聚合中正确使用此函数的信息.