Fatal编程技术网
  • javascript/
  • Javascript Angular$scope在HTML模板中不可用，但我可以在控制台日志中看到它？

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

javascript angularjs

Javascript Angular$scope在HTML模板中不可用，但我可以在控制台日志中看到它？,javascript,angularjs,angularjs-scope,Javascript,Angularjs,Angularjs Scope,我一直在关注一些，并使用开始与角度。我无法使用控制器更新页面（html模板）。我认为我设置控制器的方式有问题，因为这些值对html模板不可用 我一直在尝试遵循一些最佳实践指南，这些指南建议将我的组件包装在一个“调用的函数表达式”中，并将控制器、服务和服务管理器分开。然而，我认为我已经把这件事弄得一团糟，需要一些帮助来找出我做错了什么 通过控制台，我可以看到$scope.metric包含我想要的信息。对我来说，这意味着控制器已通过metricService成功地从API中提取数据。但是，我似乎无法

我一直在关注一些，并使用开始与角度。我无法使用控制器更新页面（html模板）。我认为我设置控制器的方式有问题，因为这些值对html模板不可用

我一直在尝试遵循一些最佳实践指南，这些指南建议将我的组件包装在一个“调用的函数表达式”中，并将控制器、服务和服务管理器分开。然而，我认为我已经把这件事弄得一团糟，需要一些帮助来找出我做错了什么

通过控制台，我可以看到$scope.metric包含我想要的信息。对我来说，这意味着控制器已通过metricService成功地从API中提取数据。但是，我似乎无法将结果打印回html页面，例如metric.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>
metricService.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);
            })
        }
})();

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

})();

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

 .state('root.metric', {
                    url: 'metric',
                    data: {
                        title: 'Metric',
                        breadcrumb: 'Metric'
                    },
                    views: {
                        'content@': {
                            templateUrl: 'core/features/metric/metric.html',
                            controller: 'MetricController',
                            controllerAs: 'MEC'
                        }
                    }
                })
metricManager.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);
            })
        }
})();

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

})();

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

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

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

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

})();

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

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

您混合了控制器别名和$scope这两个概念，在您的示例中，您使用
controllerAs
将控制器别名创建为MEC。如果您使用的是控制器别名，那么这将非常适合您：

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);
    })
}
如果您不想使用控制器别名并通过$scope在视图和控制器之间共享数据，那么在视图中应该使用类似于{：：metric.metadata.name}的内容，并且控制器函数应该保持原样

注：如果您使用的是别名，则
var-MEC=this
中的MEC可以是MEC或abc或任何您喜欢的名称，但惯例是使用
var-vm=this
和
controllerAs:'vm'
。如果您有controllerAs:“xyz”，则在您的视图中，应使用
xyz
访问模型。

您混合了两个概念控制器别名和$scope，在您的情况下，您使用
controllerAs
将控制器别名创建为MEC。如果您使用的是控制器别名，那么这将非常适合您：

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);
    })
}
如果您不想使用控制器别名并通过$scope在视图和控制器之间共享数据，那么在视图中应该使用类似于{：：metric.metadata.name}的内容，并且控制器函数应该保持原样

注：如果您使用的是别名，则
var-MEC=this
中的MEC可以是MEC或abc或任何您喜欢的名称，但惯例是使用
var-vm=this
和
controllerAs:'vm'
。如果您有controllerAs:“xyz”，则在视图中应使用
xyz
访问模型。

视图HTML有问题，您需要在绑定时使用正确的角度表达式。当您想使用：：MEC别名时，您需要将控制器标记为
as
keyowrd，如
ng controller=“xyz as MEC”
。和结帐工作


身份证件：

名称1：







{{$index+1}}。{{thing.metadata.name}




身份证件：

身份证：




Id:{{：：metric.Id}

名称：{{：：metric.metadata.Name}

高度：{{：：metric.type}

视图HTML有问题，绑定时需要使用正确的角度表达式。当您想使用：：MEC别名时，您需要将控制器标记为
as
keyowrd，如
ng controller=“xyz as MEC”
。和结帐工作



身份证件：

名称1：







{{$index+1}}。{{thing.metadata.name}




身份证件：

身份证：




Id:{{：：metric.Id}

名称：{{：：metric.metadata.Name}

高度：{{：：metric.type}

MEC在
中是什么：：MEC.metric track by$index“
试试
{：：metric}
看看你是否能显示matric object你能在html中显示ng控制器或加载控制器的部分代码（在路由或其他中）。是的。当我使用{：：metric}它将JSON对象的全文打印到页面上。：：MEC来自我的App.Routes.js文件。我刚才在上面的问题中添加了一个摘录。MEC在
：：MEC.metric track by$index“
Try
{：：metric}中是什么
并查看是否可以显示matric Objects。是否可以在html中显示ng控制器或加载控制器的部分代码（在路由或其他中）。是的。当我使用{{：：metric}时，它会将JSON对象的全文打印到页面上。:：MEC来自我的App.Routes.js文件。我刚才在上面的问题上加了一个摘录。非常感谢-现在效果很好。使用别名是一种推荐做法，还是我应该在我的App.routes.Alias中使用$scope而不使用别名，如果它有效，那么请接受回答谢谢-现在效果很好。使用别名是一种推荐做法，还是应该在我的App.routes.Alias中使用$scope而不使用别名，如果它起作用，请接受回答谢谢您的四点建议。来自@ɢʜʈᤈបʘɴ的解决方案解决了我的问题，但我将在下一步更详细地了解您的Plunk。感谢您的四点建议。来自@ɢʜʈᤈបʘɴ的解决方案解决了我的问题，但我将在下一步更详细地了解您的Plunk。