Angular.JS自定义指令不起作用

Question

I have the next problem. 我有下一个问题。 I'm doing the official Angular.js tutorial and tryin to run from myself all their examples. 我正在做官方的Angular.js教程，并尝试从自己身上运行所有示例。 I don't have any idea why those directives doesn't work in my project, while on their website are working. 我不知道为什么这些指令在我的项目中不起作用，而在他们的网站上却起作用。 'Not working' means the directives are doing nothing in this case. “不起作用”表示指令在这种情况下不执行任何操作。 I'm expecting to see the images gallery specificated in product-gallery.html. 我希望看到在product-gallery.html中指定的图像库。 It's verry frustrating. 非常令人沮丧。 Bellow you have the index.html and the .js file. 在下面，您有了index.html和.js文件。 The angular.min.js, app.js, bootstrap.min.css files are in the same folder as index.html. angular.min.js，app.js，bootstrap.min.css文件与index.html位于同一文件夹中。

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-controller="StoreController as store">

<!--  Products Container  -->
<div class="list-group">
  <!--  Product Container  -->
  <div class="list-group-item" ng-repeat="product in store.products">
    <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>

    <!-- Image Gallery  -->
    <product-gallery></product-gallery>

    <!-- Product Tabs  -->
    <product-tabs></product-tabs>

  </div>
  </div>
 </body>
</html>

The .js file: .js文件：

(function() {
 var app = angular.module('gemStore', []);

app.directive('productGallery',function(){
return {
  restrict: 'E',
  templateUrl: 'product-gallery.html',
  controller: function(){
    this.current = 0;
        this.setCurrent = function(imageNumber){
        this.current = imageNumber || 0;
        };
  },
  controllerAs: 'gallery'
  };
});

app.controller('StoreController', function() {
this.products = gems;
});

app.controller("ReviewController", function(){

this.review = {};

this.addReview = function(product){
  product.reviews.push(this.review);
  this.review = {};
};

});

app.directive("productDescriptions", function() {
return {
  restrict: 'E',
  templateUrl: "product-description.html"
};
});

app.directive("productReviews", function() {
return {
  restrict: 'E',
  templateUrl: "product-reviews.html"
};
});

app.directive("productSpecs", function() {
return {
  restrict:"A",
  templateUrl: "product-specs.html"
};
});

app.directive("productTabs", function() {
return {
  restrict: "E",
  templateUrl: "product-tabs.html",
  controller: function() {
    this.tab = 1;

    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };

    this.setTab = function(activeTab) {
      this.tab = activeTab;
    };
  },
  controllerAs: "tab"
};
});

var gems = [
{
  name: 'Azurite',
  description: "Some gems have hidden qualities beyond their luster, beyond     their shine... Azurite is one of those gems.",
  shine: 8,
  price: 110.50,
  rarity: 7,
  color: '#CCC',
  faces: 14,
  images: [
    "1.png",
    "images/gem-05.gif",
    "images/gem-09.gif"
  ],
  reviews: [{
    stars: 5,
    body: "I love this gem!",
    author: "joe@example.org"
  }, {
    stars: 1,
    body: "This gem sucks.",
    author: "tim@example.org"
  }]
}, {
  name: 'Bloodstone',
  description: "Origin of the Bloodstone is unknown, hence its low value. It has a very high shine and 12 sides, however.",
  shine: 9,
  price: 22.90,
  rarity: 6,
  color: '#EEE',
  faces: 12,
  images: [
    "2.png",
    "images/gem-07.gif",
    "images/gem-04.gif"
  ],
  reviews: [{
    stars: 3,
    body: "I think this gem was just OK, could honestly use more shine, IMO.",
    author: "JimmyDean@example.org"
  }, {
    stars: 4,
    body: "Any gem with 12 faces is for me!",
    author: "gemsRock@example.org"
  }]
  }, {
    name: 'Zircon',
    description: "Zircon is our most coveted and sought after gem. You will pay much to be the proud owner of this gorgeous and high shine gem.",
    shine: 70,
    price: 1100,
    rarity: 2,
    color: '#000',
    faces: 6,
    images: [
      "3.png",
      "images/gem-07.gif",
      "images/gem-07.gif"
    ],
    reviews: [{
      stars: 1,
      body: "This gem is WAY too expensive for its rarity value.",
      author: "turtleguyy@example.org"
    }, {
      stars: 1,
      body: "BBW: High Shine != High Quality.",
      author: "LouisW407@example.org"
    }, {
      stars: 1,
      body: "Don't waste your rubles!",
      author: "nat@example.org"
    }]
}
];
})();

And the product-gallery directive html page, for example: 以及product-gallery指令的html页面，例如：

  <div  ng-show="product.images.length">
      <div class="img-wrap">
        <img ng-src="{{product.images[gallery.current]}}" />
      </div>
      <ul class="img-thumbnails clearfix">
        <li class="small-image pull-left thumbnail" ng-repeat="image in product.images">
          <img ng-src="{{image}}" />
        </li>
      </ul>
    </div>

Answer 1

I copied your code into Plunker and included these lines in the <head> section of my index.html. 我将您的代码复制到Plunker中，并将这些行包含在index.html的<head>部分中。 You need to make certain that Jquery, Bootstrap, and Angular are properly loaded in your project. 您需要确保在项目中正确加载了Jquery，Bootstrap和Angular。 Jquery needs to be before Bootstrap since Bootstrap depends on it. jQuery必须在Bootstrap之前，因为Bootstrap依赖于它。 Once I added these dependencies, the AngularJS directives in your code worked. 一旦添加了这些依赖关系，代码中的AngularJS指令就会起作用。 If you're working in Visual Studio, you could add these to your project through the NuGet Package Manager. 如果您在Visual Studio中工作，则可以通过NuGet软件包管理器将它们添加到项目中。

<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>

Answer 2

This error is happening because you are opening html documents (your directive html code) directly from the browser. 发生此错误的原因是，您是直接从浏览器中打开html文档（您的指令html代码）。 Just serve your code from a webserver and access it on localhost. 只需从Web服务器提供您的代码并在localhost上访问它即可。

Go to directory of your project in a console and type: (you need python 3 installed for that) 在控制台中转到项目目录，然后输入：（您需要为此安装python 3）

python -m http.server [<portNo>]

Then access your website in your browser, just put localhost:8000 as an address 然后在浏览器中访问您的网站，只需输入localhost:8000作为地址

Angular.JS自定义指令不起作用

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-03-23 21:01:57

解决方案2
0 2015-06-12 09:38:30

Angular.JS自定义指令不起作用

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-03-23 21:01:57

解决方案2 0 2015-06-12 09:38:30

解决方案1
0 已采纳 2015-03-23 21:01:57

解决方案2
0 2015-06-12 09:38:30