我是AngularJs的新手.我试图调用自定义指令但它没有被调用.
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="customDirective.js"></script>
</head>
<body>
<div ng-app="app">
<div ng-controller="MyController as ctrl">
<testingDirective></testingDirective>
{{ctrl.test}}
</div>
</div>
</body>
我的javascript文件看起来像:
var app=angular.module('app',[]);
app.controller('MyController',[function(){
var self=this;
self.test='no';
}]);
app.directive('testingDirective',function(){
return{
restrict:'AE',
replace:true,
template:'<h1>Hello World Test</h1>'
};
});我正在尝试编写一个元素指令,我将其附加到控制器,以实现类似排序的行为.这是指令
.directive('sorting', function () {
return {
restrict: 'E',
scope: false, // I know I can omit this with no effect
template: function (elem, attr) {
return '<div><a href ng-click="setsort('+"'"+attr.sortkey+"'"+')">'+attr.headtext+'</a></div>'+
'<div ng-show="sortfield=='+"'"+attr.sortkey+"' || sortfield='-"+attr.sortkey+"'"+
'" ng-class="{'+"'sortreverse':sortreverse}"+'">▲</div>';
}
}
});
setsort(sortkey),sortfield并且sortreverse属于控制器的范围.
预期的行为是,▲只有在为指定元素选择了排序时才应显示caret().
排序按计划工作,但插入符号显示在所有排序列中,我得到一个奇怪的错误消息,我没有找到任何可用的反馈.
错误说:
Error: [$parse:lval] Trying to assing a value to a non l-value
http://errors.angularjs.org/1.4.5/$parse/lval
minErr/
[....a whole stacktrace ...]
"<div ng-show="sortfield=='yn_equivalent' || sortfield='-yn_equivalent'" ng-class="{'sortreverse':sortreverse}">"
有趣的事实:错误的第一行实际上是由angularjs拼写错误的(应该assign代替assing)
当被召唤时,最后一行是指令生成的输出的一部分:
<sorting …我目前正在使用一个复选框来切换8个表单元素上的disabled属性.我在每个元素上都使用了ngDisabled指令.我正在寻找一种方法,我不必将指令放在8个元素中的每一个上.这可能吗？
复选框切换
<input type="checkbox" ng-model="aircraftOnGround" />
当前工作在每个表单元素上使用的Disabled指令
ng-disabled="aircraftOnGround"
Codepen: CodePen
我正在尝试构建一个指令来处理重复的扬声器列表的渲染.这里的最终目标是让页面自动反映在模态中进行的更新.
我在这里看到的问题是该speakers对象似乎没有进入模板.
这是填充的功能speakers.它在模态的承诺中被称为. speakers是一个speaker对象的集合.数据按预期恢复.
$scope.updateSpeakersList = function () {
factory.callGetService("GetSpeakers?eventId=" + $scope.event.eventId)
.then(function (response) {
var fullResult = angular.fromJson(response);
var serviceResponse = JSON.parse(fullResult.data);
$scope.speakers = serviceResponse.Content;
if ($scope.speakers === null) {
$scope.hasSpeakers = false;
} else {
$scope.hasSpeakers = ($scope.speakers.length > 0);
}
LogErrors(serviceResponse.Errors);
},
function (data) {
console.log("Unknown error occurred calling GetSpeakers");
console.log(data);
});
}
// other code... then this
modalInstance.result.then(function (savedSpeaker) {
console.log("BEGIN modalInstance.result");
$scope.savedSpeaker = savedSpeaker;
console.log("$scope.savedSpeaker = " + …javascript angularjs angularjs-directive angularjs-templates
myApp.controller('myController', ['$scope', function($scope) {
$scope.a = 0;
$scope.find = function() {
$scope.a += 1;
}
}])
.directive('myLoading', [function() {
if ($scope.a % 2 === 0) {
return {
template: "<div>Hi</div>"
}
} else {
return {
template: ''
}
}
}]);
我每次从按钮接收点击事件时都试图操纵DOM.这应该是每次我收到点击时在模板之间切换.但我在控制台日志中收到错误.$scope is not defined,指令中的那个.
我尝试在应用程序中提供两个ng-app,当时我给了两个ng-app
<body>
<div ng-app="A">
<div ng-controller="AC">
</div>
</div>
<div ng-app="B">
<div ng-controller="BC">
</div>
</div>
</body>
然后第二个ng-app不起作用.
但是当我将第一个ng-app ="A"的范围从div更改为body时,两者都可以正常工作
<body ng-app="A">
<div>
<div ng-controller="AC">
</div>
</div>
<div ng-app="B">
<div ng-controller="BC">
</div>
</div>
</body>
任何人都可以让我知道为什么这种行为,因为我对角度很新.我想知道为什么它的工作,因为我没有在第二one.I称为angular.bootstrap试图寻找,但我并没有得到它是如何从DIV改变NG-应用程序的范围,以身体的时候工作.
找到相同的https://jsfiddle.net/maddyjolly2112/wyfd0djp/1/的小提琴,并介意将js复制到同一个.
PS - 如果你们不能回答这个问题,请不要无缘无故地投票
如果在ng-repeat中,父div具有"已加载"类,则需要隐藏适当的子元素.
<div ng-repeat="item in array" class="loading loaded">
<div class="hide_it"></div>
</div>用法 - Angular NVD3 LineChart
我正在获取数据,但是当数据为0时,它会绘制图形并绘制范围为-1,0,1的 y轴.
但我确实想在负y轴上绘图,因为我的数据永远不会是负数.
X轴包含时间.
我的图表随着时间的推移而增加,问题就像前几分钟数据将为0,然后我将开始获取数据.
JavaScript代码
$scope.options = {
chart: {
type: 'lineChart',
height: 120,
margin : {
top: 8,
bottom: 30,
left:40,
right:50,
},
color: ['#e4a91d','#444fa2','#de0000']
, showLegend: false
, wrapLabels: true
, tooltips:true
, reduceXTicks: false,
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
showDistY: true,
showDistX: true,
useInteractiveGuideline: true,
transitionDuration: 10,
xAxis: {
axisLabel: '',
tickFormat: function(d) {
return d3.time.format('%H:%M')(new Date(d));
},
tickPadding: 10,
axisLabelDistance: 1,
ticks: …我有一个非常简单的指令,应该改变它的宽度以响应$window.onresize事件.由于某种原因,只有ng-repeat数组中的最后一个元素/指令响应并相应地更改其css.
<!-- html -->
<tile class="tile" ng-repeat="tile in tiles"></tile>
// js
function main ($scope) {
$scope.tiles = []
for (let i = 0; i < 6; i++) {
$scope.tiles.push({ active: false })
}
}
function tile ($window) {
return {
link: (scope, el, attr) => {
let $main = document.querySelector('.right')
el.css({
display: `inline-block`,
padding: `1rem`,
border: `1px solid #ccc`,
width: `${$main.clientWidth / 3}px`
})
$window.onresize = () => {
console.log($main.clientWidth)
scope.$apply(() => {
el.css({
width: …我在使用angularJs的选择框中遇到ng-model问题.模型值未在控制器功能中更新.但是,它确实反映了当选择框放在主模板中时控制器的更改,而不是当它放在指令模板中时.
在main.html中正常工作
<select ng-model="selectedGuest" id="guests-sel"
ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')"
ng-options="guest as guest.value for guest in guests track by guest.key">
</select>
这是 main.html
<div ng-init="init()">
<div class="content-wrapper">
<div ng-if="selTemplate == 'tourism'">
<!-- Does not work reflect changes when changedin this directive template -->
<search-results-tourism></search-results-tourism>
</div>
<!-- Select Box ng-model value reflects in controller when placed here,
but not in directive template -->
<select ng-model="selectedGuest" id="guests-sel" ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')"
ng-options="guest as guest.value for guest in guests track by guest.key">
</select>
</div>
</div>
在指令模板中不起作用.之前我使用ng-include作为模板,但我认为这是因为ng-include创建的新范围,所以我用指令替换它但仍然没有任何想法.？ …