自定义指令问题angularjs [英] Custom directives issue angularjs
问题描述
我学习angularjs直通一个A preSS的书，其中一个例子是不正常的，我相信这个问题是自定义指令，但林不知道如何调试它，因为我的心不是控制台甚至放弃我的任何错误。
下面是我的文件。
app.html
＆LT;！DOCTYPE HTML＆GT;
＆LT;！ - 我们在这里定义sportStore模块中的HTML标记 - ＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;体育商店和LT; /标题＆GT;
＆LT;链接HREF =bootstrap.min.css的rel =stylesheet属性/＆GT;
＆LT;链接HREF =引导-theme.min.css的rel =stylesheet属性/＆GT;
＆LT; /头＆GT;
＆所述;！ - 应用纳克控制器到主体塔格 - ＆GT;
＆LT;机身NG-应用=sportsStoreNG控制器=sportsStoreCtrl＆GT;
＆LT; DIV CLASS =导航栏导航栏逆＆GT;
＆LT;一类=导航栏品牌的href =＃＆GT;体育商店和LT; / A＆GT;
＆LT; cartsummary＆GT;＆LT; / cartsummary＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =警戒警报的危险NG-秀=data.error＆GT;
错误（{{data.error.status}}）。产品数据没有被加载。 ＆LT; A HREF =/ app.html级=警报链接＆gt;点击此处重新＆LT; / A＆GT;
＆LT; / DIV＆GT; ＆LT; NG-包括SRC ='意见/ productList.html'＆GT;＆LT; / NG-包括＆GT; ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =角resource.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =控制器/ sportsStore.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =滤镜/ customFilters.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =控制器/ productListControllers.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =组件/车/ cart.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
我看了看文档，定制指令和香港专业教育学院尝试＆LT; DIV车-总结＆gt;＆LT; / DIV＆GT; ＆LT; cartsummary＆GT;＆LT; / cartsummary >和＆LT; cartsummary /方式＆gt; （我的书告诉我使用此一）和没有似乎是工作
这是我的文件指示
cart.js
angular.module（'车'，[]）。工厂（'车'，函数（）{
变种cartData = []; 返回{
addProduct命令：功能（ID，名称，价格）{
VAR addedToExistingItem = FALSE;
对于（VAR I = 0; I＆LT; cartData.length;我++）{
如果（cartData [I] .ID == ID）{
cartData [I] .Count之间++;
addedToExistingItem = TRUE;
打破;
}
}
如果（！addedToExistingItem）{
cartData.push（{
数：1，ID：ID，价格：价格，名称：名称
}）;
}
}，
removeProduct：功能（ID）{
对于（VAR I = 0; I＆LT; cartData.length;我++）{
如果（cartData [I] .ID == ID）{
cartData.splice（I，1）;
打破;
}
}
}，
的getProducts：功能（）{
返回cartData;
}
}
}）指令（cartSummary'，功能（车）{
返回{
限制：E，
templateUrl：组件/车/ cartSummary.html
控制器：函数（$范围）{
变种cartData = cart.getProducts（）; $ scope.total =功能（）{
无功总= 0;
对于（VAR I = 0; I＆LT; cartData.length;我++）{
总+ =（cartData [I]。价格* cartData [I] .Count之间）;
}
总回报;
} $ scope.itemCount =功能（）{
无功总= 0;
对于（VAR I = 0; I＆LT; cartData.length;我++）{
总+ = cartData [I] .Count之间;
}
总回报;
}
} }
}）;
和对指令的HTML文件
cartSummary.html
＆LT;风格＆GT;
.navbar右{浮动：权重;保证金右：为5px;}
.navbar文本{保证金权：10px的;}
＆LT; /风格＆GT;＆LT; DIV CLASS =Navbar的权利＆GT;
＆LT; DIV CLASS =导航栏文本＆GT;
＆LT; B＆GT;您的购物车：LT; / B＆GT;
{{ITEMCOUNT（）}}项目（S）
{{总（）|货币}}
＆LT; / DIV＆GT;
＆LT;一类=BTN BTN-默认Navbar的BTN＆GT; Checkout的LT; / A＆GT;
＆LT; / DIV＆GT;
sportsStore.js
//声明一个名为customFilters依赖性包含unqiue过滤器
angular.module（'sportsStore'，['customFilters'，'购物车']）;//调用angular.module方法传递sportsStore位于app.html
angular.module（'sportsStore'）。常数（'dataUrl，http://10.0.1.51:2403/products\").controller('sportsStoreCtrl'，函数（$范围，$ HTTP，dataUrl）{
$ scope.data = {}; $ http.get（dataUrl）.success（功能（数据）{
$ scope.data.products =数据;
}）错误（功能（错误）{
$ scope.data.error =错误;
}）;
}）;
确认：
-
您有属性
NG-应用='sportsStore'在您的标记，因为指令是在车的范围模块。 -
在您的模板，你所使用的语法
＆LT;车-总结＆gt;＆LT; /购物车-总结＆gt;，因为该指令被命名为cartSummary键，因为该指令被声明为电子字元素（参见限制：'E'）
下面是从你的例子中，code小型工作小提琴：小提琴
I'm learning angularjs thru an Apress book and one of the examples is not working properly, and I believe the issue is the custom directive, but im not sure how to debug it because my console isnt even giving me any errors.
Here are my files.
app.html
<!DOCTYPE html>
<!-- We are defining the sportStore module here in the html tag-->
<html>
<head>
<title>Sports Store</title>
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-theme.min.css" rel="stylesheet" />
</head>
<!-- Applying ng-controller to the body tagg -->
<body ng-app="sportsStore" ng-controller="sportsStoreCtrl">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">Sports Store</a>
<cartsummary></cartsummary>
</div>
<div class="alert alert-danger" ng-show="data.error">
Error ({{data.error.status}}). The product data was not loaded. <a href="/app.html" class="alert-link">Click here to try again</a>
</div>
<ng-include src="'views/productList.html'"></ng-include>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-resource.min.js"></script>
<script src="controllers/sportsStore.js"></script>
<script src="filters/customFilters.js"></script>
<script src="controllers/productListControllers.js"></script>
<script src="components/cart/cart.js"></script>
</body>
</html>
I looked at the documentation for custom directives and ive tried
<div cart-summary></div> <cartsummary></cartsummary> and <cartsummary/> (my book told me to use this one) and none appears to be working.
here is my file for the directive
cart.js
angular.module('cart', []).factory('cart', function() {
var cartData = [];
return {
addProduct: function(id,name,price) {
var addedToExistingItem = false;
for (var i = 0; i < cartData.length; i++) {
if (cartData[i].id == id) {
cartData[i].count++;
addedToExistingItem = true;
break;
}
}
if (!addedToExistingItem) {
cartData.push({
count: 1, id: id, price: price, name: name
});
}
},
removeProduct: function(id) {
for (var i = 0; i < cartData.length; i++) {
if (cartData[i].id == id) {
cartData.splice(i,1);
break;
}
}
},
getProducts: function() {
return cartData;
}
}
}).directive('cartSummary', function(cart){
return {
restrict: "E",
templateUrl: "components/cart/cartSummary.html",
controller: function($scope) {
var cartData = cart.getProducts();
$scope.total = function() {
var total = 0;
for (var i = 0; i < cartData.length; i++) {
total += (cartData[i].price * cartData[i].count);
}
return total;
}
$scope.itemCount = function() {
var total = 0;
for(var i = 0; i < cartData.length; i++) {
total += cartData[i].count;
}
return total;
}
}
}
});
and the html file for the directive
cartSummary.html
<style>
.navbar-right {float: right !important; margin-right: 5px;}
.navbar-text {margin-right: 10px;}
</style>
<div class="navbar-right">
<div class="navbar-text">
<b>Your cart:</b>
{{itemCount()}} item(s),
{{total() | currency}}
</div>
<a class="btn btn-default navbar-btn">Checkout</a>
</div>
sportsStore.js
//declaring a dependency called customFilters that contains a unqiue filter
angular.module('sportsStore',['customFilters', 'cart']);
// calling the angular.module method passing in sportsStore located in app.html
angular.module('sportsStore').constant('dataUrl', "http://10.0.1.51:2403/products").controller('sportsStoreCtrl', function($scope,$http,dataUrl) {
$scope.data = {};
$http.get(dataUrl).success(function(data) {
$scope.data.products = data;
}).error(function (error){
$scope.data.error = error;
});
});
Make sure :
your have the attribute
ng-app='sportsStore'in your markup, as the directive is in the scope of thecartmodule.in your template, you used the syntax
<cart-summary></cart-summary>, as the directive is namedcartSummaryand because the directive is declared as an Element (cf.restrict: 'E')
Here is a small working fiddle with the code from your example : fiddle.
这篇关于自定义指令问题angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
