我想创建一个简单的列表,当用户点击一个按钮时,该值显示在span元素中.
HTML和控制器
<html xmlns:ng="http://angularjs.org">
<script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
<script type="text/javascript">
function MyController(){
this.list = [{name:"Beatles", songs: ["Yellow Submarine", "Helter Skelter", "Lucy in the Sky with Diamonds"]}, {name:"Rolling Stones", songs:["Ruby Tuesday", "Satisfaction", "Jumpin' Jack Flash"] }]
this.songs = [];
}
</script>
<body ng:controller="MyController">
<p>selected: <span ng:bind="selected" ng:init="selected='none'" /></p>
<ul>
<li ng:repeat="artist in list">
<button ng:click="selected = artist.name" >{{artist.name}}</button>
</li>
</ul>
<!--ol>
<li ng:repeat="song in songs">
{{song}}
</li>
</ol-->
</body>
我想动态显示被点击的艺术家的歌曲列表.这是正确的方法吗？
我正在使用AngularJS的v1.2.0 rc2,并想知道为多个控制器提供通用功能的最佳方法是什么.
我有以下验证功能,我想在编辑模型的所有控制器中使用:
$scope.canSave = function (formController) {
return formController.$dirty && formController.$valid;
};
$scope.validationClasses = function (modelController) {
return {
'has-error': modelController.$invalid && modelController.$dirty,
'has-success': modelController.$valid && modelController.$dirty
};
};
我想保持我的控制器干,所以我定义了一个工厂如下:
angular.module('myModule', [])
.factory('validationFactory', [function () {
return {
validationClasses: function (modelController) {
return {
'has-error': modelController.$invalid && modelController.$dirty,
'has-success': modelController.$valid && modelController.$dirty
};
},
isFormValid: function (formController) {
return formController.$dirty && formController.$valid;
}
};
}]);
最初,我只是将工厂混合到需要它的控制器中,如下所示:
$scope.canSave = validationFactory.isFormValid;
$scope.validationClasses = validationFactory.validationClasses;
但我意识到我可以将它们添加到模块的run方法中的$ rootScope中,如下所示:
angular.module('myModule', [])
.run([
'$rootScope',
'validationFactory', …我已经选择了一个项目,我正在尝试将一些数据从服务返回到我的控制器.我已经在这里待了大约12个小时,并尝试了不同的方法.它们通常都会产生同样的"缺失数据".
我试过了
$http.get右侧放在控制器内而不使用promises我觉得我现在所拥有的是一个简单的,因为我可以得到它,而我所读到的一切都说这应该有效
这些链接就是从今天开始的.
我认为可能存在$ scope问题,因为过去我已经看到$ scopes在使用多个控制器时没有获取数据,但是该站点只是在index.html中声明一个控制器作为<body ng-app="myApp" ng-controller="BodyCtrl">设置.主app.js使用状态(我认为来自ui-router)就像这样......
.state('app.view', {
url: '/view',
templateUrl: 'views/view.tpl.html',
controller: 'MyCtrl'
})
将控制器连接到不同的页面.此外,该网站还有一些其他控制器从服务中获取数据,我首先将其作为模板查看,然而,数据和返回比我想要的更复杂.但最重要的是,控制器正在访问服务提供的数据.他们都使用$ resource,这就是我从这个问题开始的方式.我坚持使用$ http因为它应该可以工作,而且我希望在我进入"更高级别"的东西之前使用它.另外,我只需要从端点获取GET,所以觉得$ resource太过分了.
服务
.factory('MyService', ['$http', '$q', '$rootScope', function ($http, $q, $rootScope) {
var defer = $q.defer();
var factory = {};
factory.all = function () {
$http({method: 'GET', url: 'http://URLtoJSONEndpoint'}). …angularjs angularjs-service angularjs-scope angularjs-controller angularjs-http
UserService维护sessionStatus用户(布尔值)的服务.ng-show=sessionStatus(即如果未登录(false),则不显示).sessionStatusViewController因此,应该总是匹配UserService......对吗？sessionStatus值更改,并且视图应该更新为新的结果ng-show.... <a ng-show="sessionStatus" ng-click="logout()">Logout</a>
app.controller('AppController', function($scope, $interval, $http, UserService) {
$scope.logout = function() { UserService.logout(); }
// This ain't working
$scope.$watch(UserService.sessionStatus, function() {
$scope.sessionStatus = UserService.sessionStatus;
});
});
注意:appUser是HTML头中注入的全局变量(一个hacky修复,直到我得到会话/ cookie的东西正常工作)
app.factory('UserService', function($http) {
var pre;
var sessionStatus;
function init() { // Logged in : Logged out
pre = appUser.user != undefined …javascript angularjs angularjs-service angularjs-scope angularjs-controller
我使用了两个不同的控制器(假设:myCtrl1和myCtrl2),并在myCtrl1上设置了一个按钮.当我们点击此按钮时,操作通过ajax调用进入myCtrl2.现在我在.service()对象上附加一些数据并使用重定向页面$state.go('tabs.myCtrl1).现在我无法在对象中获取附加数据.但是当app第一次加载它时会在.service()中读取空对象.
任何人都对我有帮助
angularjs angularjs-service angularjs-scope angularjs-controller
我正在尝试编写一个生成网格的指令.以下代码有效但我必须指定控制器名称'DemoCtrl'.是否可以从指令中检索当前控制器名称,以便将其传递给buildColumn/buildRows函数？
angular.module('app').controller('DemoCtrl', function ($scope) {
$scope.controller = "DemoCtrl";
$scope.coldata = [
{name: 'Account'},
{name: 'Name'}
];
$scope.rowdata = [
{
"account": "ABC",
"name": "Jim",
},
{
"account": "DEF",
"name": "Joe",
},
{
"account": "GHI",
"name": "Fred",
}
];
});
angular.module('foxy.components.grid', [])
.controller('GridController', ['$scope', '$attrs', function ($scope, $attrs) {
}])
.directive('grid', function ($compile) {
return {
restrict: 'EA',
controller: 'GridController',
require: "^ngController",
scope: {
data: "=",
columns: "=",
controller: "="
},
link: function (scope, element, attrs, ctrl) {
scope.$watch('data', function () …javascript angularjs angularjs-directive angularjs-controller
angularjs中服务(或工厂)的生命周期是什么？何时重新初始化？
当控制器不再相关时,何时,何地以及如何摆脱旧的事件监听器？
考虑SPA有两条路线:/login和/loggedin
app.factory('socket', ['$window', function(window) {
return window.io();
}]);
app.controller('loginController', ['socket', function (socket) {
this.tryLogin = function(credentials) {
socket.emit('login', credentials);
}
sokcet.on('loginResponse', function(data) {
if (data.status == 'OK') {
// Navigate to loggedInController
} else {
// Show error message and keep listening - user might try again
}
});
}]);
app.controller('loggedInController', ['socket', function (socket) {/* Logged in, but loginController is still listening for loginResponse */}]); …我已经阅读了所有帖子,其中人们得到这个问题,其中$ http不是一个函数,并且看起来大多数情况下它是由于以错误的顺序进行注入.
我的模块定义如下所示:
angular.module("app", []).controller("appCtrl", ['$scope','$http',
function ($scope, $http) {
...
$scope.makeCall= function ($http) {
console.log("HERE");
$http({ method: 'GET', url: <url }).
then(function (response) {
console.log(response.data);
return response.data;
}, function (response) {
});
};
}
])
任何建议将不胜感激.
javascript promise angularjs angularjs-controller angularjs-http
我想将Angular UI Datepicker限制在作为变量传入的两个日期之间.我希望在不添加像momentjs这样的库的情况下让它工作,因为这是我需要处理日期的唯一字段.
这是这个问题的一个问题:
http://plnkr.co/edit/zsjpoVZtHqJLIP2RW6vm?p=preview
这是变量:
mycurrentdate = '2016-04-18'
mymindate = '2016-04-01'
mymaxmonth = '2016-05-01'
mymaxdate will be calculated from mymaxmonth to be
mymaxdate = '2016-05-31'
我的实际最大日期将是mymaxmonth的最后一天
$scope.maxDate = new Date(
$scope.mymaxmonth + (TO THE END OF THE MONTH)
);
需要注意的一点是,运行它会new Date()返回给定日期前一天的日期.例如:
$scope.minDate = new Date(
$scope.mymindate
);
$ scope.minDate返回Wed Mar 30 2016 17:00:00 GMT-0700 (PDT)我查找了为什么它返回3月30日而不是4月1日的原因,这似乎是时区错误？
我想设置一个'2016-04-01'的mymindate并获取mymaxdate ='2016-05-31'并禁用此范围之外的所有日期.我已经阅读了Javascript日期和时间初学者指南,并在此处进行了尝试.
在控制器中我有:
$scope.mymindate = '2016-04-01';
$scope.mymaxmonth = '2016-05-01'; //want mymaxdate to be '2016-05-31'
$scope.minDate = new Date($scope.dt.getFullYear(), …