我试图从我的自定义指令获取一个评估属性,但我找不到正确的方法.
我已经创建了这个jsFiddle来详细说明.
<div ng-controller="MyCtrl">
<input my-directive value="123">
<input my-directive value="{{1+1}}">
</div>
myApp.directive('myDirective', function () {
return function (scope, element, attr) {
element.val("value = "+attr.value);
}
});
我错过了什么？
我一直在使用AngularJS一段时间,并且发现需要每隔一段时间使用$ timeout(似乎通常是初始化一个jQuery插件).
最近,我一直在努力更好,更深入地了解摘要周期,我遇到了$ evalAsync函数.
似乎该函数产生类似的结果$timeout,只有你没有给它延迟.每次我使用$timeout它都会延迟0,所以现在我想知道我是否应该使用它$evalAsync.
这两者之间是否存在根本差异？你会用哪种情况比另一种情况多？我想更好地了解何时使用哪一个.
在angularjs中你有标签ng-src,其目的是在angularjs评估位于{{和之间的变量之前,你不会收到无效网址的错误}}.
问题是我使用了一些DIV,并background-image设置了一个url.我这样做是因为优秀的CSS3属性background-size可以将图像裁剪为DIV的精确尺寸.
唯一的问题是我收到很多错误的原因与创建ng-src标签的原因完全相同:我在url中有一些变量,浏览器认为图像不存在.
我意识到有可能写出原油{{"style='background-image:url(myVariableUrl)'"}},但这看起来很"脏".
我搜索了很多,找不到正确的方法来做到这一点.由于所有这些错误,我的应用程序变得一团糟.
在我将更改添加到$ scope变量之后,我正在寻找一种执行代码的方法,在本例中为$ scope.results.我需要这样做,以便在它可以执行之前调用一些遗留代码,这些遗留代码要求项目在DOM中.
我的真实代码是触发AJAX调用,并更新范围变量以更新ui.所以我目前我的代码在推送到示波器后立即执行,但遗留代码失败,因为dom元素尚未可用.
我可以使用setTimeout()添加一个丑陋的延迟,但这并不能保证DOM真正准备就绪.
我的问题是,有什么方法可以绑定到"渲染"类似的事件？
var myApp = angular.module('myApp', []);
myApp.controller("myController", ['$scope', function($scope){
var resultsToLoad = [{id: 1, name: "one"},{id: 2, name: "two"},{id: 3, name: "three"}];
$scope.results = [];
$scope.loadResults = function(){
for(var i=0; i < resultsToLoad.length; i++){
$scope.results.push(resultsToLoad[i]);
}
}
function doneAddingToDom(){
// do something awesome like trigger a service call to log
}
}]);
angular.bootstrap(document, ['myApp']);
链接到模拟代码:http://jsfiddle.net/acolchado/BhApF/5/
提前致谢!
我首先尝试AngularJS自定义指令.
我在使用(或理解......)指令的link函数中的隔离范围时遇到了麻烦.
以下是我的应用程序的这部分代码:
view.html
...
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data>
...
request 是在viewCtrl范围内发布的变量,它包含请求的xml-string.
rawData.js
directives.directive('rawData', function() {
return {
restrict : 'E',
templateUrl : 'partials/directives/raw-data.html',
replace : true,
transclude : true,
scope : {
id : '@',
title : '@',
data : '='
},
link : function($scope, $elem, $attr) {
console.log($scope.data); //the data is correclty printed
console.log($scope.id); //undefined
}
};
});
原始data.html
<div>
<!-- Button to trigger modal -->
<a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>
<!-- …我有一个控制器,它有一个不时变化的计数器.
该计数器与指令的属性相关联,并在该指令的链接函数内读取.
每次attr值改变时,如何使用指令运行函数？
谢谢.
我在网上找到了这个Angular Directive来添加一个twitter分享按钮.这一切似乎都是明星前进,但我无法弄清楚attrs.$observe实际上在做什么.
我查看了文档,但无法$observe在任何地方看到引用.
该指令似乎只是添加了href来自控制器的指令,所以任何人都可以解释其余代码在做什么？
module.directive('shareTwitter', ['$window', function($window) {
return {
restrict: 'A',
link: function($scope, element, attrs) {
$scope.share = function() {
var href = 'https://twitter.com/share';
$scope.url = attrs.shareUrl || $window.location.href;
$scope.text = attrs.shareText || false;
href += '?url=' + encodeURIComponent($scope.url);
if($scope.text) {
href += '&text=' + encodeURIComponent($scope.text);
}
element.attr('href', href);
}
$scope.share();
attrs.$observe('shareUrl', function() {
$scope.share();
});
attrs.$observe('shareText', function() {
$scope.share();
});
}
}
}]);
<a href="" target="_blank" share-twitter share-url="[[shareTwitterUrl]]" share-text="[[shareTwitterText]]">Twitter</a>
我在我的一个AngularJS应用程序中使用Slick轮播.为此,我创建了如下指令:
myApp.directive('slickSlider',function(){
return {
restrict: 'A',
link: function(scope,element,attrs) {
$(element).slick(scope.$eval(attrs.slickSlider));
}
}
});
这是我在视图文件中的代码:
<div class="clearfix"
slick-slider="{dots: false, arrows: true, draggable:
false, slidesToShow:3, infinite:false}">
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
<div class="my-slide">
<a><img ng-src="assets/img/img1.png"/></a>
</div>
</div>
在这种情况下,它工作正常并正确初始化.
但是当我使用ngRepeat动态创建幻灯片时,它没有初始化并一个接一个地显示幻灯片.
这是我使用ngRepeat的代码
<div class="clearfix"
slick-slider="{dots: false, arrows: true, draggable:
false, slidesToShow:3, infinite:false}">
<div class="my-slide" ng-repeat="slide in …角度noobie在这里.我想知道当范围中的值通过某种方式改变时更改dom的最佳方法是什么.我读到将dom操作逻辑放在控制器中并且这是指令的工作并不好.
这是一个傻瓜
http://plnkr.co/edit/xWk5UBwifbCF2raVvw81?p=preview
基本上,当通过单击上面的plunkr中的加载数据按钮更改数据时,我希望其值更改的单元格自动突出显示.我不能让它为我的生活工作.
有帮助吗？
我有一个带有ng-bind指令的div元素:
<div ng-bind="sometext"></div>
我有一个指令,它获取一个元素,检查它的值/文本,并根据内容为元素添加颜色.我正在使用这个指令:
<div ng-bind="sometext" my-directive></div>
问题是,在指令执行时,div上没有值或文本,因为ng-bind尚未发生.
我正在使用element.text()获取文本.
知道如何在我的指令中提供文本吗？
使用AngularJS.我有一个指令,我希望有两种方式的数据绑定.该指令将具有一个名为"activate"的属性.最初,"激活"的值将为"1".
该指令的链接功能将检查"activate"是否等于"1".如果是这样,它会将"激活"改为0,但做其他一些事情.
之后,如果我希望指令再次执行某些操作,在控制器中,我会再次将"激活"更改为"1".由于指令有手表,它将重复循环.
不幸的是,每次我这样做,我得到的'表达'0'与指令'testDirective'一起使用是不可分配的!" 或"不可分配的模型表达式:1(指令:testDirective)".
这是HTML:
<body ng-app="app">
<test-directive activate="1"></test-directive>
</body>
这是JS:
var app = angular.module('app', []);
app.directive('testDirective', function() {
return {
restrict: 'E',
scope: {
activate : '='
},
link: function( scope, elem, attrs, controller ) {
var el = elem[0];
var updateContent = function() {
el.innerText = 'Activate=' + scope.activate;
};
updateContent();
attrs.$observe( 'activate', function() {
console.log('Activate=' + scope.activate);
if( scope.activate == '1') {
scope.activate = '0'
updateContent();
}
});
}
}
});
这里是jsFiddle:http://jsfiddle.net/justbn/mgSpY/3/
为什么我不能更改存储在指令属性中的值？我正在使用双向绑定. …
我正在使用fcsaNumber指令检查输入到输入框中的数字的有效性.我得到了这个工作,但我检查的值是动态的,这意味着它可以根据选择的选项而改变.看来这个指令只初始化一次.当选项发生变化时,我需要做些什么来重新初始化？
//this works fine
<input name="Employees" type="text" ng-model="Input.Employees" fcsa-number="{min: 1}" required="">
//this only inits once, so its not dynamic
<input name="Employees" type="text" ng-model="Input.Employees" fcsa-number="{{getMin()}}" required="">