我有一个textarea,默认情况下它从头开始显示内容.我想默认显示结束内容,如果你向上滚动它应该在顶部显示内容.
我怎样才能做到这一点？
所以我知道使用双向绑定,=在一个指令中,控制器的值可以传递给指令.但是,如何将隔离指令中的更改传递回控制器？
因此,例如,我有一个表单,其中有一个滑块,该滑块使用带有隔离范围的指令构建.初始值从控制器设置,然后使用隔离范围更改指令.
我正在尝试做的是当具有双向绑定的指令变量也发生变化时更改控制器的值.
有什么建议？
javascript validation angularjs angularjs-directive angularjs-scope
使用angularjs测试表单验证时遇到问题
具有ngModel指令的输入控件包含NgModelController的实例.可以使用输入控件上的name属性将此类控件实例发布为表单实例的属性.
我在plunker上创建了测试代码,一切正常,直到我更改输入名称
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
至
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
对我来说问题是我想保持正常的表单提交流程并且只使用angular进行表单验证,所以我需要将表单输入保持为数组以使用后端表单处理
forms validation angularjs angularjs-directive angularjs-scope
我正在建立一个像这样的指令(超时功能就像一个演示):
app.directive('timeRange', function () {
return {
restrict: 'A',
scope: {
sliderId: "@sliderId",
},
template: '<div id="{{sliderId}}"></div>'+
'<p>From: <span>{{fromVal}}</span>'+
'<span style="float:right;">{{toVal}}</span><span style="float:right;">To: </span>'+
'</p>',
link: function (scope, elem, attrs) {
scope.sliderId = 'NewId';
scope.fromVal = '06:00';
scope.toVal = '17:00';
setTimeout(function(){
scope.fromVal = 'Hello';
log("Changed");
}, 2000);
},
};
});
超时函数运行时,HTML不会更新,值保持不变06:00.如何在变量出现时更新模板？我是否需要以某种方式将其scope链接到我链接属性的部分？
我有一张桌子和许多<td>s,<tr> </tr>我首先使用的是ng-repeat
<tr ng-repeat="receipt in $data">
<td data-title="voucher number">
<span>{{receipt.voucher_no}}</span>
</td>
<td data-title="voucher date" sortable="'voucher_date'" filter="{'voucher_date': 'text' }">
<span>{{receipt.voucher_date}}</span>
</td>
<td data-title="voucher Amount">
<span>{{receipt.voucher_amount}}</span>
</td>
</tr>
我也有json数据
{
"data": [
{
"voucher_no": "2",
"voucher_amount": "100",
"voucher_date": "2014-05-04",
},
{
"voucher_no": "3",
"voucher_amount": "1000000",
"voucher_date": "2014-02-05",
},
{
"voucher_no": "4",
"voucher_amount": "50000",
"voucher_date": "2014-02-05",
},
.
.
.
.
{
"total": 1360100
}
]
}
please note that for final data there is only one field …所以我正在努力将范围传递给我的自定义指令.
这是我的HTML
<li ng-repeat="post in posts | filter:search | orderBy:sortField:reverse" class="archives-listing" ng-class="{'last-border':$last}">
<archive-notes></archive-notes>
</li>
这是我的指示
app.directive('archiveNotes', function(){
return {
restrict: 'E',
transclude: true,
scope: {
notes: '@',
paths: '@'
},
controller: function($scope) {
},
templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/notes.html'
}
})
app.directive('archiveFolders', function(){
return {
require: '^archiveNotes',
restrict: 'E',
transclude: true,
scope: {
path: '@'
},
link: function(scope, element, attrs) {
},
templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/folders.html'
}
});
这是我的模板.
notes.html
<div ng-class="{'found' : find(post.paths[$index], search)}" class="arch-notes">
<div ng-bind-html="is_NotesEmpty(post.notes)">{{post.notes}}</div>
<archive-folders></archive-folders>
</div>
folders.html
<div ng-repeat="path in post.paths …javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
在模板中使用动态标记名称的Angular建议方法是什么？
我有一个包含h1-h6标签的下拉列表.用户可以选择其中任何一个,并且内容将更改为由所选标头标记(存储在$ scope中)进行包装.内容绑定到模型,即{{}}内.
要保持绑定,我可以更改标记并使用$ compile.但是,这不起作用,因为它会在Angular用模型值替换{{}}之前(显然)附加.这是页面加载时的h3.
例:
<div id="root">
<h3 id="elementToReplace">{{ modelData }}</h3>
</div>
重新编译时我尝试使用如下字符串:
<{{ tag }} id="elementToReplace">{{ modelData }}</{{ tag }}>
有任何想法吗？
我正在使用一个控制器作为子范围的指令,我正试图让它们说话.似乎当我从子控制器发出一个事件时,父指令只能在没有声明隔离范围的情况下听到这个事件.为什么在我的指令块中声明一个隔离范围$ emit会听到事件？
HTML
<flippy data-click-toggle="true" data-mouseover-toggle="true">
<flippy-front>
<div ng-controller="test">
<div class="test" ng-click="flip()">
front
</div>
</div>
</flippy-front>
<flippy-back>
<div ng-controller="test">
<div class="test" ng-click="flip()">
back
</div>
</div>
</flippy-back>
</flippy>
JS
poop = angular.module('angular-flippy', []);
poop.directive('flippy', function() {
return {
restrict: 'E',
scope: {}, <------- works when isolate scope not declared
link: function($scope, $elem, $attrs) {
var flip = function() {
$elem.toggleClass('flipped');
}
$scope.$on("flipped", flip);
}
};
});
poop.controller('test', ['$scope', function($scope) {
$scope.flip = function() {
$scope.$emit("flipped");
};
}]);
codepen:http: …
它适用于静态下拉列表,但当使用angularjs申请动态数据加载时,已应用selectpicker,但未加载数据.如果我从下拉列表中删除了该指令,则数据完全加载,问题是什么？我试过更多......
注意:使用类创建的方法,所以没有问题
bootselectpicker: function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, element, attrs, ctrl) {
element.selectpicker();
}
}
}
<select id="special-size" bootselectpicker ng-model="items.selectSize" ng-options="size.key as size.value for size in products.sizes" ng-change="sizeChange('size',items.selectSize)" class="selectpicker size-droplist">
<option value="">Select Size</option>
</select>
所以,
我使用ngRepeat渲染基本列表,但首先<li>需要静态内容,而不是从数据数组生成:
例如
<ul ng-repeat="item in items">
<li>This is text from the template and will always be the same.</li>
<li>{{item}}</li>
</ul>
我也看过使用ng-repeat-start,但是不能完全找到解决方案.