Angular JS-{{}}不起作用，但是data-ng-bind顯示范圍

Question

我在Angular JS中遇到問題。 我不明白為什么我的范圍中的數據不能與{{}}顯示，但是如果我使用指令：data-ng-bind可以顯示。

如果有人有想法：

這是我的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>

這是我的控制器：

angular.module('core').controller('PortalController', ['$scope', 'Portal',
function($scope, Portal) {
    $scope.getAppslist = function() {
        Portal.getApps(function(callback) {
            $scope.appslist = callback;
            $scope.blabla = 'blabla';
        });
    };
}]);

這是我的服務：

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);
}});

預先感謝您的回復

馬丁·塔茲

Answer 1

您不需要ng-href中的把手。 嘗試：

<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>

更好的是將其轉換為控制器上的方法。

Answer 2

<a ng href="'#!/apps/' + app.CloudAppInstanceId">{{app.Name}}</a>

在我看來，應用程序未在范圍內定義，但是您在PortalController設置的是$scope.appslist 。

另外， Portal工廠函數必須返回一個對象實例（當前不返回任何內容）。 而且工廠的方法實際上也必須返回一個承諾。

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';
             });
         };
    }
]);

我改變了一點，特別是。 擺脫了callback參數-您不需要，只需獲取getApps（）返回的諾言，並在諾言得到解決后使用數據即可。