我有一个带隔离范围的指令(这样我可以在其他地方重用该指令),当我使用这个指令时ng-repeat,它无法工作.
我已阅读有关此主题的所有文档和Stack Overflow答案,并了解问题.我相信我已经避免了所有常见的陷阱.
所以我理解我的代码因ng-repeat指令创建的范围而失败.我自己的指令创建了一个isolate-scope,并对父作用域中的对象进行双向数据绑定.我的指令将为这个绑定变量赋一个新的对象值,当我的指令没有使用时ng-repeat(父变量被正确更新),这种方法非常有效.但是,使用ng-repeat,赋值在ng-repeat作用域中创建一个新变量,而父变量看不到更改.所有这些都是基于我所读到的预期.
我还读到,当给定元素上有多个指令时,只创建一个范围.并且priority可以在每个指令中设置a 来定义指令的应用顺序; 指令按优先级排序,然后调用它们的编译函数(在http://docs.angularjs.org/guide/directive上搜索单词优先级).
所以我希望我可以使用优先级来确保我的指令首先运行并最终创建一个隔离范围,并且在ng-repeat运行时,它重新使用隔离范围而不是创建原型继承父范围的范围.该ng-repeat文档声明该指令以优先级运行1000.目前尚不清楚1是优先级更高还是优先级更低.当我1在我的指令中使用优先级时,它没有任何区别,所以我尝试了2000.但这会让事情变得更糟:我的双向绑定变成了undefined我的指令并没有显示任何东西.
我创造了一个小提示来展示我的问题.我已经priority在我的指令中注释掉了这个设置.我有一个名称对象列表和一个名为对象的指令name-row,它显示了名称对象中的名字和姓氏字段.单击显示的名称时,我希望它selected在主范围中设置变量.名称数组,selected变量name-row使用双向数据绑定传递给指令.
我知道如何通过调用主范围中的函数来使其工作.我也知道如果selected在另一个对象内部,并且我绑定到外部对象,事情就会起作用.但我现在对这些解决方案不感兴趣.
相反,我的问题是:
ng-repeat从创建prototypically从父范围继承的范围,而是把它用我的指令的分离,范围有多大？2000我的指令中的优先级不起作用？angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
所以我有这个名为say的指令mySave,它就是这个
app.directive('mySave', function($http) {
return function(scope, element, attrs) {
element.bind("click", function() {
$http.post('/save', scope.data).success(returnedData) {
// callback defined on my utils service here
// user defined callback here, from my-save-callback perhaps?
}
});
}
});
元素本身看起来像这样
<button my-save my-save-callback="callbackFunctionInController()">save</button>
callbackFunctionInController现在只是
$scope.callbackFunctionInController = function() {
alert("callback");
}
当我console.log() attrs.mySaveCallback在my-save指令里面时,它只是给了我一个字符串callbackFunctionInController(),我在某个地方读到我应该解析它并且它会没问题,所以我试着给$parse(attrs.mySaveCallback)了我一些函数,但几乎没有我想要的那个,它让我回来了
function (a,b){return m(a,b)}
我究竟做错了什么？这种方法从一开始就有缺陷吗？
我的代码中有地方,我有这个:
<input data-ng-disabled="SOME_SCOPE_VARIABLE" />
我也希望能够像这样使用它:
<input data-ng-autofocus="SOME_SCOPE_VARIABLE" />
甚至更好,模仿ng-style的完成方式:
<input data-ng-attribute="{autofocus: SOME_SCOPE_VARIABLE}" />
当前版本的AngularJS中是否存在这种情况？我注意到代码中有一个BOOLEAN_ATTR,它获取AngularJS支持的所有attr.我不想修改它,因为害怕更改版本而忘记更新.
我有一个我这样使用的指令:
<dir model="data"></dir>
该指令具有独立的范围.
scope :{
model:'='
}
现在我正在尝试使用ng-show我的页面的$ scope的另一个属性来使用该指令,如下所示:
<dir ng-show="show" model="data"></dir>
但它不起作用,因为该指令试图show在自己的范围内找到属性.
我不希望该指令知道它的容器可能选择隐藏它的事实.
我找到的解决方法是将指令包装在一个<div>并应用于ng-show该元素,但我不喜欢这个强制我使用的额外元素:
<div ng-show="show" >
<dir model="data"></dir>
</div>
有没有更好的方法呢？
看到这个plunker:http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR？p =preview
我正在创建简单的ui-datetime指令.它将javascript Date对象拆分为_date,_hours和_minutes部分._date使用jquery ui datepicker,_hours和_minutes - 数字输入.
angular.module("ExperimentsModule", [])
.directive("uiDatetime", function () {
return {
restrict: 'EA',
replace: true,
template: '<div class="ui-datetime">' +
'<input type="text" ng-model="_date" class="date">' +
'<input type="number" ng-model="_hours" min="0" max="23" class="hours">' +
'<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' +
'<br />Child datetime1: {{datetime1}}' +
'</div>',
require: 'ngModel',
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
var elDate = element.find('input.date');
ngModelCtrl.$render = function () {
var date = new Date(ngModelCtrl.$viewValue);
var fillNull = function (num) {
if (num …我正在尝试在自定义指令标记上应用ng-style属性,有点像这样:
<my-directive ng-style="myStyle"></my-directive>
在控制器里面我有:
$scope.myStyle = {
"background": "red"
}
这似乎不起作用.当我检查HTML'MyStyle'时,没有渲染.当我在常规div上应用相同的ng-style标记时,它会正确呈现.
为什么ng-style不适用于自定义指令标签？
如果我有一个没有模板的AngularJS指令,并且我希望它在当前作用域上设置属性,那么最好的方法是什么？
例如,一个计算按钮点击次数的指令:
<button twoway="counter">Click Me</button>
<p>Click Count: {{ counter }}</p>
使用指令将点击计数分配给双向属性中的表达式:
.directive('twoway', [
'$parse',
function($parse) {
return {
scope: false,
link: function(scope, elem, attrs) {
elem.on('click', function() {
var current = scope.$eval(attrs.twoway) || 0;
$parse(attrs.twoway).assign(scope, ++current);
scope.$apply();
});
}
};
}
])
有一个更好的方法吗？从我所读到的,一个孤立的范围将是矫枉过正,但我需要一个儿童范围？是否有更简洁的方法来回写指令属性中定义的范围变量而不是使用$parse.我觉得我让这个太难了.
Full Plunker 在这里.
我的所有指令都使用相同的范围,我希望我的指令可以自己操作.
指示:
app.directive('headerSort', function () {
return {
restrict: 'A',
controller: function ($scope, $element, $attrs) {
$scope.caption = $attrs.caption;
$scope.doSort = function () {
$scope.orderField = $attrs.headerSort;
$scope.reverse = !$scope.reverse;
};
},
template: '<div data-ng-click="doSort();">' +
'{{caption}}' +
'<i class="icon-sort"></i>' +
'</div>'
};
});
HTML:
<th data-header-Sort="FullName" data-caption="Full name"></th>
<th data-header-Sort="FirsName" data-caption="First name"></th>
<th data-header-Sort="Age" data-caption="Age"></th>
结果是所有列都具有值'Age'并按Age排序.我当然希望每列都对它自己的列进行排序.我怎样才能做到这一点？
更新:忘了提及,orderField并reverse用于ng-repeat | orderBy:
<tbody id="customerRows" data-ng-repeat="customer in customers | orderBy:orderField:reverse">
我做了很多解决方法,搜索和研究,但我无法想象如何实现我的目标.
- 问题:
- 我感到困惑:
- 我希望如何解决它:
<input type="text" name="newComission_dateFrom" ng-model="newCommission.from" notincluded=myFunction({{$index}})/>
函数myFunction将迭代一个包含所有addedCommissionsDates的列表,并将它与所有日期范围进行比较,除了包含在addedCommisionsDates [index]中的范围.
目标是可以在不使用隔离范围的情况下评估属性中的表达式.
孤立的范围我遇到了很多问题,我完成了对这篇文章的同意:
在编写指令时,如何确定是否不需要新范围,新子范围或新隔离范围？.
编辑 我正在寻找如何实现ngRequire,因为ngRequire可以接受ng-require ="aFunction()",我在我的指令中使用$ parsers达到了这个目标.所以,我现在可以执行一个功能了! 我使用它做了一些进展,但我希望在我的指令中执行该函数的结果,我希望达到这样的效果
rangesToEval = //我的函数或表达式的结果.
查看具有ngRepeat的内容,我无法确定返回此函数的值的范围
if(attrs.notincluded) {
var notIncludedValidator = function(value) {
ngModelCtrl.$setValidity('notincluded', !attrs.notincluded);
return value;
};
}
一切运作良好,因为我使用的是一个布尔值,但是,我想用一个列表,在属性执行expresion的结果notincluded
//此输入是ng-repeat的一部分
Run Code Online (Sandbox Code Playgroud)<input type="text" ng-model="commission.date" ng-required="true" notincluded="filterDatesFn({{$index}})" />
我在我的控制器中有这个功能:
$scope.filterDatesFn = function(index) {
// in this list, we will add the dates of the defined commissions
if($scope.addedCommisionsDate) {
var listToEvalue= [];
for ( …为什么格式化程序不适用于隔离范围？这是有角度的错误还是我做错了什么？
这包含隔离范围,不起作用:http://jsfiddle.net/YbdXQ/56/
restrict: 'A',
scope:{},
link: function(scope, elm, attrs, ctrl) {
ctrl.$formatters.unshift(function(modelValue) {
console.log("In formatters" + modelValue);
return $filter('date')(modelValue);
});
这不包含隔离和范围工作正常:http://jsfiddle.net/YbdXQ/57/
restrict: 'A',
link: function(scope, elm, attrs, ctrl) {
ctrl.$formatters.unshift(function(modelValue) {
console.log("In formatters" + modelValue);
return $filter('date')(modelValue);
});
我正在创建两个使用相同控制器的指令,因此我看到两个指令在控制器之间共享数据.我想要的是每个指令的数据都是UNIQUE,因此不应该共享数据.
var app = angular.module("app",[]);
app.controller('myCtrl', function($scope){
$scope.data = {
name: 'Javier'
};
});
app.directive('dir1', function(){
return {
template: "<div style='background:red'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
app.directive('dir2', function(){
return {
template: "<div style='background:yellow'><input type='text' ng-model='data.name'>{{data.name}}</div>",
controller: "myCtrl"
};
});
https://jsbin.com/vetikuvada/1/edit?html,js,output
因此,在我的示例中,我想要的是当我在其中一个文本框中编辑文本时,它不会触发其他文本框中的更改.我知道控制器部署了不同的实例,但不知怎的,它们共享范围,我需要完全不同.这可能吗？
该示例是一个非常复杂的应用程序的一小部分,所以我必须能够使用这种方法而不是其他方法.
javascript angularjs angularjs-directive angularjs-scope angularjs-controller