Question

我是角色的新手，我正在尝试构建我的第一个指令，但它并没有在我的HTML中呈现。

这是我的HTML页面：该指令在HTML的底部调用

    <!DOCTYPE html>
    <html ng-app="store">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/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">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="product in store.product">
            <h3 >
                <product-name></product-name>
            </h3>
</li>
</ul>
</body>
</html>

这是我的app.js：

(function(){
var app = angular.module("store",[]);
var gem = [
    {
    name: "Dodec",
    price: 2.95,
    canPurchase: true,
    soldOut: false,
    reviews: []
    },
    {
    name: "Panta",
    price: 20.4,
    canPurchase: true,
    soldOut: false,
    reviews: []
    }
];
app.controller("storeController",function(){
    this.product = gem;
});

app.controller("tabController",function($scope){
    $scope.tab = 1;
    $scope.SetTab = function(value){
        $scope.tab = value;
    };

    $scope.IsSet = function(value){
        return value === $scope.tab;
    }
});

app.controller("ReviewController", function($scope){
    $scope.review = "";

    $scope.addReview = function(product){
        product.reviews.push($scope.review);
        $scope.review = "";
    };

});

app.directive("productName",function(){
    return {
        restrict : "E",
        templateUrl : "product-name.html"
    };
});




})();

最后注意指令。

最后这是我的product-name.html文件：

{{product.name}}
<em class="pull-right"> {{product.price | currency}}</em>

我做错了什么？为什么指令表现得不像它应该的那样？

由于

Answer 1

在product-name.html中，AngularJS指令模板必须有一个根元素。

我将html包装在this plnkr.

中的div中

<div>
 {{product.name}}
 <em class="pull-right"> {{product.price | currency}}</em>
</div>

Answer 2

问题出在我的服务器上，我从这里下载了http服务器https://github.com/nodeapps/http-server然后启动了它，指令现在出现了。

Angular指令不起作用

2 个答案: