Fatal编程技术网
  • javascript/
  • Javascript Angularjs:Pictures赢了'；t载荷

Javascript Angularjs:Pictures赢了'；t载荷

javascript html angularjs

Javascript Angularjs:Pictures赢了'；t载荷,javascript,html,angularjs,angularjs-directive,Javascript,Html,Angularjs,Angularjs Directive,更新：它可以在Firefox中使用，但不能在Chrome中使用！有什么想法吗 我正在学习一个教程，它创建了一个带有缩略图的智能手机/平板电脑的简单列表。 问题：执行步骤7后，缩略图将不再加载 它实际上在之前的步骤中起作用，但我不知道我做错了什么。如果我直接调用URL栏中的图像URL，它就会工作。但无论如何，我做不到。我在Chrome的JavaScript控制台中也没有发现任何错误 缩略图位于/app/img/phones/下（例如/app/img/phones/dell-streak-7.0.

更新：它可以在Firefox中使用，但不能在Chrome中使用！有什么想法吗

我正在学习一个教程，它创建了一个带有缩略图的智能手机/平板电脑的简单列表。

问题：执行步骤7后，缩略图将不再加载

它实际上在之前的步骤中起作用，但我不知道我做错了什么。如果我直接调用URL栏中的图像URL，它就会工作。但无论如何，我做不到。我在Chrome的JavaScript控制台中也没有发现任何错误

缩略图位于/app/img/phones/下（例如/app/img/phones/dell-streak-7.0.jpg）

以下是我认为相关的文件。如果你需要更多的情报，请告诉我。非常感谢

/app/index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">

  <!-- Angular imports -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>

  <!-- My imports -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>
<body>

    <div ng-view></div>

</body>
</html>
/app/js/controllers.js

'use strict';

/* App Module */
var phonecatApp = angular.module('phonecatApp', [
    'ngRoute', 
    'phonecatControllers' 
]);

phonecatApp.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: 'PhoneListCtrl'
            }).
            when('/phones/:phoneId', {
                templateUrl: 'partials/phone-detail.html',
                controller: 'PhoneDetailCtrl'
            }).
            otherwise({
                redirectTo: '/phones'
            });

    }
]);

'use strict';

/* Controllers */

var phonecatControllers = angular.module('phonecatControllers', []);

phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http', 
    function ($scope, $http) {
        $http.get('phones/phones.json').success(function(data) {
            $scope.phones = data;
        })

        $scope.orderProp = 'age'
    }
]);


phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams', 
    function($scope, $routeParams) {
        $scope.phoneId = $routeParams.phoneId
    }
]);
尝试在
ngsrc
属性中的url周围不使用
{{}

ng src指令将表达式作为参数，因此不需要使用绑定语法
{{}
。绑定语法基本上是告诉angular期望表达式的一种方法

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
上的文档并非绝对清晰，因为它们在表达式中使用了绑定语法

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
尝试在
ng src
属性中的url周围不使用
{{}

ng src指令将表达式作为参数，因此不需要使用绑定语法
{{}
。绑定语法基本上是告诉angular期望表达式的一种方法

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
上的文档并非绝对清晰，因为它们在表达式中使用了绑定语法

<img ng-src="http://www.gravatar.com/avatar/{{hash}}"/>
我找到了解决办法

它可以在Firefox中正常工作，但不能在Chrome中正常工作。清除浏览数据毫无帮助。这个问题是由AngularJS Batarang造成的，我不知道是什么原因

因此，我禁用了Chrome扩展插件AngularJS Batarang，它立即起作用

请参阅此处的报告：

我找到了解决方案

它可以在Firefox中正常工作，但不能在Chrome中正常工作。清除浏览数据毫无帮助。这个问题是由AngularJS Batarang造成的，我不知道是什么原因

因此，我禁用了Chrome扩展插件AngularJS Batarang，它立即起作用

请参阅此处的报告：

这是正确的。angular中
ng something
中的任何内容都已经是angular正在计算和编译的表达式。添加
{{}
将阻止这种情况的发生。是的，我可能应该添加更多的解释。我会更新答案。嘿，BenCr，我尝试了你的解决方案：
，但它不起作用。本教程的解决方案也和我一样（在我执行第7步之前，它已经使用了
{{}}
）：如果有错误，您会遇到什么错误？是否使用batarang确认作用域中存在
phone.imageUrl
？使用{{phone.imageUrl}将url输出到模板中的某个位置。我还将window.myScopeName=$scope；作为大多数控制器的第一行，我可以使用chrome开发者工具控制台来摆弄它，并查看不同时间的值。如果你加上，你可以看到什么是在手机收集这是正确的。angular中
ng something
中的任何内容都已经是angular正在计算和编译的表达式。添加
{{}
将阻止这种情况的发生。是的，我可能应该添加更多的解释。我会更新答案。嘿，BenCr，我尝试了你的解决方案：
，但它不起作用。本教程的解决方案也和我一样（在我执行第7步之前，它已经使用了
{{}}
）：如果有错误，您会遇到什么错误？是否使用batarang确认作用域中存在
phone.imageUrl
？使用{{phone.imageUrl}将url输出到模板中的某个位置。我还将window.myScopeName=$scope；作为大多数控制器的第一行，我可以使用chrome开发者工具控制台来摆弄它，并查看不同时间的值。如果你补充说，你可以看到手机收藏中有什么，如果他们解决了你的巴塔朗机票问题，我很想知道问题出在哪里。这看起来是一个有用的工具，如果他们解决了你的巴塔朗问题，我很想知道问题出在哪里。它看起来像一个有用的工具