所以我的问题是Controller构造函数执行多次.如果我有2 Directives与特定关联,Controller那么它运行2 + 1,如果3 Directives,然后3 + 1...等等.如果我在该控制器中有一个ajax请求来获取数据,那么它会运行那么多次并不是真正的必要...
为什么会这样？我非常担心它会使所有那些额外的不必要的ajax请求......
HTML:
<span ng-controller="MenuController as MenuCtrl">
<main-menu></main-menu>
</span>
控制器:
var howManyTimes = 0;
angular.module("shredkit", ["myDirectives"])
.controller("MenuController", function(){
++howManyTimes;
console.log("HOW MANY TIMES? THAT MANY: " + howManyTimes )
})
指示:
angular.module("myDirectives", [])
.directive("mainMenu", function(){
return{
restrict:"E", // type of directive - 'E' - element
templateUrl:'templates/main-menu.html',
controller:"MenuController",
controllerAs: "MenuCtrl"
};
})
目前正在使用fullcalendar.io
在文档中,它有calendar.fullCalendar('refetchEvents'),它从服务器重新获取所有事件.
简而言之,我希望完成calendar.fullCalendar('refetchEvents')请求并向我发送回调以告诉我.我希望在继续执行某些任务之前下载所有事件.
我怎样才能做到这一点？
jquery jquery-callback fullcalendar angularjs angularjs-directive
我想为我的图像标签创建一个角度指令,将图像src更改为集合中的随机图像或通过调用服务.更改应该在5秒后发生或作为指令的输入.这可能吗,有人可以帮助我开始吗？
我也会为此添加动画但是,以后再.....
作为AngularJS的新手,任何帮助或指示都将受到赞赏.
谢谢.
我试图实现一个指令,用于只接受字母到文本框中,即从az或Az我尝试这样做,
angular.module('myApp', []).directive('alphabetsOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
if (inputValue == undefined) return ''
var transformedInput = inputValue.replace(/^[a-zA-Z]+$/, '');
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
function MyCtrl($scope) {
$scope.name = ''
}
但这不起作用.
试过模式
'/^[a-zA-Z]$/'
但没有成功.谁能帮我这个.
除非我弄错了,否则我会遇到一些应该有效的问题.
我有一个键:值对象设置如下:
{
key1:"val1",
key2:"val2",
key3:"val3",
key4:null
}
在我看来,我有这个:
<div class="col-md-4" ng-repeat="(key, value) in list" ng-if="key != 'key1' || value != null">
<ul>
<li>{{ key }} : {{ value }} </li>
</ul>
</div>
问题:如果我只使用key != 'key1'作品,则不显示key1的键和值.
如果我也只使用value != null作品,则不显示key4.
但是当我将if语句与||结合使用时 (OR),忽略整个if语句.
我在这里做错了吗？
我在这里发布了一个例子:http://jsfiddle.net/caxoyud2/
Thanx提前!
angularjs angularjs-directive angularjs-ng-repeat angular-ng-if
我有这个控制器:
app.controller('HomeController', function($scope) {
$scope.buttonList = [
{
href: "http://ciao.html",
cssClass: "",
iconBeforeCssClass: "",
labelCssClass: "",
labelText: "ciao",
iconAfterCssClass: "",
},
{
href: "ciao2.html",
cssClass: "",
iconBeforeCssClass: "",
labelCssClass: "",
labelText: "ciao2",
iconAfterCssClass: "",
}
];
});
该指令:
app.directive('widgetButtonList', function() {
var directive = {};
directive.restrict = 'E';
directive.replace = false;
directive.templateUrl = 'modules/directives/widget-button-list.html';
directive.scope = {
additionalCssClass: "@",
buttons : "@",
};
return directive; });
模板如下:
<div class="ap-block ap-button-list-block {{additionalCssClass}}">
<ul>
<li ng-repeat="btn in buttons track by $index">
<a …我正在尝试创建一组可重用的小部件,可以在我正在制作的任何网站上使用.似乎AngularJS指令是解决此问题的好方法,但我在使用外部模板文件时遇到问题.
如果我对指令使用内联模板它加载得很好但是如果我使用外部模板它会抛出一个错误:https: //docs.angularjs.org/error/ $ compile/tplrt？p0 = bwInfoCard&p1 =
这是我的测试夹具:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Directive Test Fixture</title>
<link rel="stylesheet" href="./Style.css" type="text/css" />
<script src="../../Libraries/angular.min.js"></script>
<script src="./Widget.js"></script>
<script src="./Fixture.js"></script>
</head>
<body ng-app="BaseWidgetFixtures">
<h1>Base Info Card</h1>
<div ng-controller="InfoCardFixture">
<bw-info-card title="title"></bw-info-card>
</div>
</body>
</html>
我的相关控制器:
/// <reference path="..\..\typings\angularjs\angular.d.ts" />
angular.module('BaseWidgetFixtures', ['bwDirectives'])
.controller('InfoCardFixture', function ($scope) {
$scope.title = "TITLE";
});
我的Angular指令:
/// <reference path="..\..\typings\angularjs\angular.d.ts" />
angular.module('bwDirectives', [])
.directive('bwInfoCard', function () {
return {
restrict: 'E',
transclude: false,
replace: true, …我对Angular的指令很新,并试图弄清楚使用它们的正确方法.我正在使用ng-repeat来填充元素列表.一旦加载了转发器,我想查看每个元素并找到哪个是最高的(其中包含最多的文本),然后强制所有元素达到该大小.
在jQuery中实现这一点的方法是这样的:
var tallest = 0;
// Loop through each element
$('.element-class').each(function () {
var thisHeight = $(this).height();
if (thisHeight > tallest)
tallest = thisHeight;
});
// Apply height to all elements
$('.element-class').height(tallest);
有人能够指导我如何使用指令(或其他更合适的Angular方式)来实现这一目标.转发器看起来像这样.
<div class="element-class" ng-repeat="item in items">
<div class="element-title" ng-bind="item.title"></div>
<p class="element-text" ng-bind="item.description"></p>
</div>
我有一张桌子，每一行都要使用指令和ng-repeat显示。
不幸的是，这些行是在表上下文之外呈现的。
请在这里运行小提琴：http : //jsfiddle.net/nu1tu9qL/4/
指令：
.directive('myrow', [function () {
return {
restrict: 'E',
replace: true,
scope: {
rowdata: "="
},
template: '<tr><td>{{rowdata.a}}</td><td>{{rowdata.b}}</td></tr>',
};
}]);
HTML：
<table>
<thead>
<th>A</th>
<th>B</th>
</thead>
<tbody>
<myrow ng-repeat="d in data" rowdata="d"></row>
</tbody>
</table>
我写了一个指令,为每个传递给指令的产品显示一个按钮.subscribe单击按钮时,也应将产品传递给指令的功能.
我遇到的问题是该参数未传递给该函数.
指令
directives.directive('subscriptionItem', function () {
return {
scope: {
// Two way binding, = is equivalent to '=activeSubscription'
activeSubscription: '=',
products: '=',
googleLogin: '&',
subscribe: '&'
},
restrict: 'E',
replace: 'true',
templateUrl: 'common/directives/subscription-item.tpl.html'
};
});
模板
<div>
<ion-item class="item-text-wrap">
<h2>{{activeSubscription.status}} - {{activeSubscription.action}}</h2>
<p>{{activeSubscription.description}}</p>
</ion-item>
<ion-item ng-repeat="product in products" class="item-text-wrap" ng-if="activeSubscription.action === 'PAID'">
<h2>{{product.title | limitTo: product.title.length - 21}}</h2>
<p>{{product.description}}</p>
<button class="button button-block button-positive" ng-click="subscribe(product.productId)">
Buy for {{product.price}} - {{product.productId}}
</button>
</ion-item>
</div>
该product.productId显示正常,但不能传递给函数.
指令用法 …