[英]Angular JS - {{ }} not working but data-ng-bind display the scope
I've an issue with Angular JS. 我在Angular JS中遇到问题。 I don't get why my data in the scope can't be displayed with the {{ }} but can be display if I use the directive : data-ng-bind.
我不明白为什么我的范围中的数据不能与{{}}显示,但是如果我使用指令:data-ng-bind可以显示。
If anyone has an idea : 如果有人有想法:
Here's my HTML Code : 这是我的HTML代码:
<aside id="sidebar-left" class="sidebar-left" data-ng-controller="PortalController" data-ng-init="getAppslist()">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano" >
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="#!/">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="#!/users">
<i class="fa fa-users" aria-hidden="true"></i>
<span>Users</span>
</a>
</li>
<li class="nav-parent">
<a href="#!/apps">
<i class="fa fa-cubes" aria-hidden="true"></i>
<span>Apps</span>
</a>
<ul class="nav nav-children">
<li ng-repeat="app in appslist">
<a ng-href="#!/apps/{{app.CloudAppInstanceId}}">{{app.Name}}</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
Here's my controller : 这是我的控制器:
angular.module('core').controller('PortalController', ['$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps(function(callback) {
$scope.appslist = callback;
$scope.blabla = 'blabla';
});
};
}]);
And here's my service : 这是我的服务:
angular.module('core').factory('Portal', function($http, $cookies, $rootScope) {
// define factory object
var factory = {};
var getApps = function(callback){
$http.get($rootScope.logrrApiAddress + '/apps', config).success(function(data, status, headers, config) {
callback(data);
});
}
factory.getApps = function(callback){
return getApps(callback);
}});
Thanks in advance for your response 预先感谢您的回复
Martin Taz 马丁·塔兹
You don't need handlebars in an ng-href. 您不需要ng-href中的把手。 Try:
尝试:
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Better yet would be to turn that into a method on your controller. 更好的是将其转换为控制器上的方法。
<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>
Seems to me that app is not defined in the scope, what you do set in PortalController
, though, is $scope.appslist
. 在我看来,应用程序未在范围内定义,但是您在
PortalController
设置的是$scope.appslist
。
Also, the Portal
factory function must return an object instance (it currently doesn't return anything). 另外,
Portal
工厂函数必须返回一个对象实例(当前不返回任何内容)。 AND the factory's method must actually return a promise, too. 而且工厂的方法实际上也必须返回一个承诺。
angular.module('core').factory('Portal', [
'$http', '$cookies', '$rootScope',
function($http, $cookies, $rootScope) {
var factory = {}; // define factory object
factory.getApps = function(){
// FIXME: what is "config", where is it supposed to come from?
return $http.get($rootScope.logrrApiAddress + '/apps', config);
};
return factory; // <-- you need to return something
}
]);
angular.module('core').controller('PortalController', [
'$scope', 'Portal',
function($scope, Portal) {
$scope.getAppslist = function() {
Portal.getApps().then(function (data) {
$scope.apps = data;
$scope.blabla = 'blabla';
});
};
}
]);
I changed things a bit, esp. 我改变了一点,特别是。 got rid of the
callback
parameter - you don't need that, simply get the promise that getApps() returns and use the data once the promise is resolved. 摆脱了
callback
参数-您不需要,只需获取getApps()返回的诺言,并在诺言得到解决后使用数据即可。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.