javascript - Angular $scope 在 HTML 模板中不可用，但我可以在控制台日志中看到它？

Question

我一直在关注一些online tutorials并使用 angularjs-template开始使用 Angular。我无法使用 Controller 更新页面(html 模板)。我认为我设置 Controller 的方式有问题，因为这些值不可用于 html 模板。

我一直在尝试遵循一些最佳实践指南，这些指南建议将我的组件包装在“调用函数表达式”中，并将 Controller 、服务和服务管理器分开。然而，我认为我已经对此进行了一些哈希处理，需要一些帮助来找出我做错了什么。

通过控制台，我可以看到 $scope.metric 包含我想要的信息。对我来说，这意味着 Controller 已通过 metricService 成功从我的 API 拉回数据。但是我似乎无法将结果打印回 html 页面，例如指标.id。

感谢任何帮助 - 我已经无计可施地试图解决这个问题。

metric.html

<div class="panel panel-primary">
<div class="panel-body">
     <!-- Try First Way to Print Results -->
    Id: <span ng-bind="metric.id"></span></br>
    Name:<input type="text" ng-model="metric.metadata.name" /></br>

    <!-- Try Second Way to Print Results -->
    <p data-ng-repeat="thing in ::MEC.metric track by $index">
        {{$index + 1}}. <span>{{thing.metadata.name}}</span>
            <span class="glyphicon glyphicon-info-sign"></span>
        </a>
    </p>

<!-- Try Third Way to Print Results -->
    Id: <span ng-bind="Metric.metricId"></span></br>
    Id: <span ng-bind="Metric.id"></span></br>
    Id: <span ng-bind="metricService.id"></span></br>

<!-- Try Fourth Way to Print Results -->
      Id: <strong>{{::MEC.metric.id}}</strong></br>
      Name: <strong>{{::MEC.metric.metadata.name}}</strong></br>
      Height: <strong>{{::MEC.metric.type}}</strong>
</div>

metricController.js

(function () {
    'use strict';

    angular.module('app.metric', ['app.metricService', 'app.metricManager'])    
        .controller('MetricController', MetricController) 

        MetricController.$inject = ['$scope', 'metricManager', '$log'];

        function MetricController($scope, metricManager, $log) {

            metricManager.getMetric(0).then(function(metric) {
                $scope.metric = metric
                $log.info('$scope.metric printed to console below:');
                $log.info($scope.metric);
            })
        }
})();

metricService.js

(function () {
    'use strict';

    angular.module('app.metricService', [])    

    .factory('Metric', ['$http', '$log', function($http, $log) {  
        function Metric(metricData) {
            if (metricData) {
                this.setData(metricData);
            }
            // Some other initializations related to book
        };

        Metric.prototype = {
            setData: function(metricData) {
                angular.extend(this, metricData);
            },

            delete: function() {
                $http.delete('https://n4nite-api-n4nite.c9users.io/v1/imm/metrics/' + metricId);
            },

            update: function() {
                $http.put('https://n4nite-api-n4nite.c9users.io/v1/imm/metrics/' + metricId, this);
            },

            hasMetadata: function() {
                if (!this.metric.metadata || this.metric.metadata.length === 0) {
                    return false;
                }
                return this.metric.metadata.some(function(metadata) {
                    return true
                });
            }
        };
        return Metric;
    }]);

})();

metricManager.js

(function () {
    'use strict';

    angular.module('app.metricManager', [])   

    .factory('metricManager', ['$http', '$q', 'Metric', function($http, $q, Metric) {  
    var metricManager = {
        _pool: {},
        _retrieveInstance: function(metricId, metricData) {
            var instance = this._pool[metricId];

            if (instance) {
                instance.setData(metricData);
            } else {
                instance = new Metric(metricData);
                this._pool[metricId] = instance;
            }

            return instance;
        },
        _search: function(metricId) {
            return this._pool[metricId];
        },
        _load: function(metricId, deferred) {
            var scope = this;

            $http.get('https://n4nite-api-n4nite.c9users.io/v1/imm/metrics/' + metricId).then(successCallback, errorCallback)

                function successCallback(metricData){
                    //success code
                    var metric = scope._retrieveInstance(metricData.id, metricData);
                    deferred.resolve(metric);
                };

                function errorCallback(error){
                    //error code
                    deferred.reject();
                }
        },

        /* Public Methods */
        /* Use this function in order to get a metric instance by it's id */
        getMetric: function(metricId) {
            var deferred = $q.defer();
            var metric = this._search(metricId);
            if (metric) {
                deferred.resolve(metric);
            } else {
                this._load(metricId, deferred);
            }
            return deferred.promise;
        },

        /* Use this function in order to get instances of all the metrics */
        loadAllMetrics: function() {
            var deferred = $q.defer();
            var scope = this;
            $http.get('ourserver/books')
                .success(function(metricsArray) {
                    var metrics = [];
                    metricsArray.forEach(function(metricData) {
                        var metric = scope._retrieveInstance(metricData.id, metricData);
                        metrics.push(metric);
                    });

                    deferred.resolve(metrics);
                })
                .error(function() {
                    deferred.reject();
                });
            return deferred.promise;
        },

        /*  This function is useful when we got somehow the metric data and we wish to store it or update the pool and get a metric instance in return */
        setMetric: function(metricData) {
            var scope = this;
            var metric = this._search(metricData.id);
            if (metric) {
                metric.setData(metricData);
            } else {
                metric = scope._retrieveInstance(metricData);
            }
            return metric;
        },

    };
    return metricManager;
}]);
})();

来自 App.routes 的片段

 .state('root.metric', {
                    url: 'metric',
                    data: {
                        title: 'Metric',
                        breadcrumb: 'Metric'
                    },
                    views: {
                        'content@': {
                            templateUrl: 'core/features/metric/metric.html',
                            controller: 'MetricController',
                            controllerAs: 'MEC'
                        }
                    }
                })

控制台

Answer 1

您正在混合 Controller 别名和 $scope 这两个概念，在您的情况下，您将使用 controllerAs 创建 Controller 别名作为 MEC。如果您使用 Controller 别名，那么这对您来说效果很好:

function MetricController($scope, metricManager, $log) {
    var MEC = this;
    metricManager.getMetric(0).then(function(metric) {
        MEC.metric = metric
        $log.info('$scope.metric printed to console below:');
        $log.info($scope.metric);
    })
}

如果您不想使用 Controller 别名并通过 $scope 在 View 和 Controller 之间共享数据，那么在您的 View 中您应该使用类似 {{::metric.metadata.name}} 的内容，并且 Controller 函数应保持为是的。

PS:如果您使用别名，则 var MEC = this 中的 MEC 可以是 MEC 或 abc 或您喜欢的任何名称，但约定是使用 var vm = this和controllerAs:'vm'。如果您有 controllerAs: 'xyz' 那么在您的 View 中 xyz 应该用于访问模型。