从配置为ng-view模板的模板中获取元素?
问题描述:
var shop = angular.module("shopStore",['ngRoute']);
shop.controller('productsList',function($scope){
$scope.stock = [
{type: "motherboard",model: 'AM1I',company: 'MSI'},
{type: "motherboard",model: ' A88XM-PLUS/CSM FM2', company: 'MSI'}
];
});
shop.config(function ($routeProvider){
$routeProvider.
when('/', {
controller: 'productsList',
templateUrl: "partials/home.html"
}).
when('/products', {
controller: 'productsList',
templateUrl: "partials/products.html"
}).
when('/cart', {
controller: 'productsList',
templateUrl: 'partials/cart.html'
})
});
var x = document.querySelector('#elem');
console.log(x);
// Doesn't work, it doesn't work with all the others.
产品安排没关系,我还有一个文件的所有信息, 它只是让你知道的结构从配置为ng-view模板的模板中获取元素?
<b><div id="elem"></div></b>
<div id="stock" ng-repeat="products in stock" ondrag="part.drag(this)">
<div class="image">
<a href={{products.link}}>
<img ng-src={{products.picture}} title{{products.company}} width="70px">
</a>
</div>
<div class="type">{{products.type}}</div>
<div class="company">{{products.company}}</div>
<div class="model">{{products.model}}</div>
<div class="button1"><button ngclick="add(product)">Add</button></div>
<div class="buttonInput">
<input type="button" onclick='Shoping.remove(this)' value="X">
</div>
</div>
当我尝试调用任何的元素通过ID或querySelector文档部分html不起作用;我应该写什么来从ng-view模板中获取元素?
JS的是在顶部和模板HTML是在底部它是经常使用,而不是在角JS
答
下增加了动态创建变量到$范围对象,使变量提供给控制器。这些变量通过ng-view标签添加到主应用程序页面。
AngularJS
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'productsList',
templateUrl: "partials/home.html"
}).when('/products', {
controller: 'productsList',
templateUrl: "partials/products.html"
}).when('/cart', {
controller: 'productsList',
templateUrl: 'partials/cart.html'
})
});
app.controller('MainController', ['$scope', function ($scope) {
$scope.stock1 =[ {type: "motherboard",model: 'AM1I',company: 'MSI'},
{ type: "motherboard",model: ' A88XM-PLUS/CSM FM2', company: 'MSI' }
] ;
//The following is where the magic is realized!
//**var 'directiveElement' locates the dynamically created variable.
//Id 'item0' is the first span Id dynamically created by the stock-scope object's
//'template' attribute**
var directiveElement = angular.element(document.getElementById('item0'));
});
}]);
app.directive('stockScope', function() {//name
return {
restrict: 'E', //'E' matches only names in elements
replace: true, //will replace the stock1 $scope object declared above once
//it is matched to it, in this case we are using the
//html '<stock-scope stock="stock1"></stock-scope>'
//to match it to the directive parameter of 'stock' declared below
scope: {
stock: '='
},
template: '<p><span id="item{{index}}" ng:repeat="(index, item) in stock">'
+ '{{item.type}}, {{item.model}}, {{item.company}} <br /></span></p>'
};
});
HTML
<!-- add the following html to the partials/products.html -->
<stock-scope stock="stock1"></stock-scope>
此外,还要启动应用程序的HTML页面,包括NG-view标记,
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
研究联系
https://docs.angularjs.org/guide/directive
How to use `replace` of directive definition?
您可能需要提供一些示例代码,以便您的问题更加清晰。 – 2014-11-21 01:07:07
您正在控制器(产品)中使用未定义的变量。您还需要分享主视图和局部视图,以显示您如何使用范围变量。如果产品应该来自服务,那么您应该使用代码回答更多问题。 – alou 2014-11-21 09:53:49
我需要使用它仅适用于JavaScript使用而不是角度使用 – Ilan 2014-11-21 09:55:47