我有一个带隔离范围的指令(这样我可以在其他地方重用该指令),当我使用这个指令时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
我有一个ng-repeat打印列表项.我想编写一个自定义过滤器,以便只有条件为真时才会打印列表项.
我似乎有错误的结构,因为似乎变量没有传递给过滤器.
的index.php
<div ng-show="userDetails.username" class="nav">
<p>Menu</p>
<li ng-repeat="menuItem in menu | matchAccessLevel:$rootScope.userDetails.accessLevel:menuItem.minAccess | orderBy:'position' ">
<a ng-href="/angular-app/app/{{menuItem.id}}">{{menuItem.name}}</a>
</li>
</div>
app.js
userApp.filter('matchAccessLevel', function() {
return function( item, userAccessLevel, minAccessLevel ) {
if( userAccessLevel >= minAccessLevel ) {
return item;
}
}
});
我有一个带有多个标签的标签页,一旦点击就会调用服务来返回一些数据.其中一些数据返回html表单并且非常随机.我想收集输入的值,并通过服务将数据发送回服务器.我遇到的问题是我无法从动态创建的html中的输入元素中获取数据.
我创建了一个Plunker来展示问题所在.请注意,html值可以随时更改,因此硬编码html将无法正常工作.这里是来自plunker的代码,但请查看plunker以获得最佳视图.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce, $compile) {
$scope.name = 'World';
$scope.html = "";
$scope.htmlElement = function(){
var html = "<input type='text' ng-model='html'></input>";
return $sce.trustAsHtml(html);
}
});
的index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-bind-html="htmlElement()"></div>
{{html}}
</body>
</html>
在我的Angular应用程序中,我有一个md-tabs,其md-selected指令绑定到我的控制器中的属性.我想将当前选项卡更改为索引由我的模板中其他位置的ng-click调用的函数设置的选项卡.
我是这样做的:
<div ng-controller="TrackingCtrl" layout-fill>
<md-content ng-if="isSmart" layout-fill>
<md-tabs md-selected="selectedIndex" layout-fill>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>.........</md-tab>
<md-tab>
<md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
<md-tab-body>
<md-tab-content layout-fill flex>
<button ng-click="map.panTo(getPosition());displayMap();"></button>
</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
在我的控制器中我有:
$scope.selectedIndex = 0;
$scope.displayMap = function() {
$scope.selectedIndex = 1;
};
但是当我点击调用displayMap()的按钮时它根本没有任何效果;
我检查了这个问题:
似乎一切正常......除了标签不会改变.
我正在运行Angular Material 1.0.2
我甚至用$ apply强制更新(没效果):
$scope.selectedIndex = 0;
$scope.displayMap = function () {
$timeout(function () {
if (!$scope.$$phase) {
$scope.$apply(function …我正在尝试在我的项目中使用UI Bootstrap Pagination指令,但由于某些奇怪的原因,用于更新当前页面的ng模型不起作用.使用正确数量的选项卡和所有内容正确显示分页,但是当我单击其他数字时,ng-model变量不会更新.对于我的生活,我无法弄清楚为什么不.
我使用的代码取自UI Bootstrap主页上的示例:
<uib-pagination total-items="totalItems" ng-model="currentPage"
ng-change="pageChanged()"></uib-pagination>
控制器看起来像这样:
$scope.currentPage = 1;
$scope.totalItems = 160;
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
以下是我需要的不同来源:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
最奇怪的是我创建了一个复制我的代码的plnkr,它的工作原理!你可以在这里看到:http://plnkr.co/edit/4DoKnRACbKjLnMH5vGB6
任何人都可以想到可能导致这种情况无效的任何想法吗？我在这里摸不着头脑,想不出任何明显我做错的事......
所有的帮助都很有帮助!
我在我的一些页面上使用了ng-include,但是我不得不停止使用ng-include,因为它打破了angular-ui datepicker.我打开了这个Github错误.
我想知道是否有其他人在使用作为ng-include的一部分时,指令不能以相同的方式运行.
是否有办法使日期选择器作为ng-include的一部分按预期工作？
这是一个展示它是如何破碎的掠夺者.http://plnkr.co/edit/AboEJGxAK3Uz76CfpaZ0?p=preview
这是在视图上工作的html,但在部分ng包含时不起作用.
<div class="row">
<div class="col-md-2">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="yyyy/MM/dd" ng-model="something.dt2" is-open="secondCal"
min-date="minDate" name="secondCal" max-date="'2015-06-22'" datepicker-options="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" style="line-height: 1.2em" ng-click="open($event, 'secondCal')">
<i class="ss-icon ss-calendar"></i>
</button>
</span>
</p>
</div>
</div>
这是来自控制器的JS.
$scope.open = function ($event, elementOpened) {
$event.preventDefault();
$event.stopPropagation();
$scope[elementOpened] = !$scope[elementOpened];
};
我正在做两种方式 - 包括
<div ng-include src="'dist/partials/myPartial.html'"></div>
<div ng-include="'dist/partials/myPartial.html'"></div>
更新 我发现这是因为ng-include指令为每个include创建了一个新的作用域. 这个SO帖子创建了一个新的指令,它可以在不创建新范围的情况下完成包含.然而,似乎"应该"是一种方法来修复它而不使用不同的包含.
我ng-include src在HTML中的多个地方使用指令.每个ng-include都为自己创造了一个孤立的范围,这显然给我带来了很多麻烦.
例如.
<div ng-controller="parent">
<div ng-include src="'id1'">
</div>
<div ng-include src="'id2'">
</div>
<div ng-include src="'id2'">
</div>
</div>
在上面提到的html中,创建了4个范围.在父级中controller定义了1,默认情况下每个都创建了3个ng-include src.
是否可以防止ng-include为自己创建一个孤立的范围？如果不可能那么有一个解决方法吗？
javascript directive angularjs angularjs-directive angularjs-ng-include
我遇到了一些基本的角度数据绑定问题.
我的看法:
<select
ng-model="selectedPerson"
ng-options="person.name for person in testdataset"
ng-change="personChanged(selectedPerson)">
<option value="">All Persons</option>
</select>
我的控制器:
$scope.testdataset = [
{name:"bill"},
{name:"bob"},
{name:"batman"}
];
$scope.personChanged = function(person) {
console.log(person);
}
这很好用 - 记录选定的名称.
但是,当选择名称时,这只是打印"未定义"
视图:
<select
ng-model="selectedPerson"
ng-options="person.name for person in testdataset"
ng-change="personChanged()">
<option value="">All Persons</option>
</select>
控制器:
$scope.testdataset = [
{name:"bill"},
{name:"bob"},
{name:"batman"}
];
$scope.personChanged = function() {
console.log($scope.selectedPerson);
}
我很有棱角,我只是感到困惑.我假设它与函数内部的$ scope的"范围"有关,但我不确定如何排除故障......
我有以下控制器:
app.controller('MyCtrl', function($interval, $scope) {
$scope.foo = 2;
$interval(function() {
console.log($scope.foo);
}, 1000);
});
以下代码在我看来:
<input type="text" ng-model="foo" />
当我加载页面时,输入正确填充值"2".但是,如果我更改输入中的值,控制台将继续记录"2"(不带引号).
我用了一个$interval只是为了说明 - $watch()回调只发射一次,然后再也没发生过.如果我ng-change=""在输入上使用,那么$scope.foo在回调中总是等于2.
我究竟做错了什么？
我正在尝试进行两种过滤方式(通过点击字母或在输入字段中输入).
<body ng-controller="MainController">
<ul search-list=".letter" model="search">
<li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
</ul>
<div class="container" ng-controller="CountriesController">
<input id="q" type="text" ng-model="search " />
<ul>
<li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>
</div>
</body>
和js:
var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
app.directive('searchList', function() {
return {
scope: {
searchModel: '=model'
},
link: function(scope, element, attrs) {
element.on('click', attrs.searchList, function() {
scope.searchModel = $(this).text();
scope.$apply();
});
}
};
});
controllers.MainController = function($scope) { …angularjs ×10
javascript ×6
angular-ui ×1
directive ×1
filter ×1
filtering ×1
jquery ×1
ng-repeat ×1