对于观看的对象范围内的变量,是$scope.$watch用objectEquality设置为true或$scope.$watchCollection更好？
对于一个$scope对象变量(如15点的属性,一些嵌套2级深)与输入元件和更新ng-model在视图中,是怎样坏$scope.$watch与objectEquality设置为true？这是一件要避免的大事吗？
是$watchCollection更好的解决方案吗？
我正在寻找轻松获胜以提高我的AngularJS App的性能(我仍然坚持v1.2.2).
// ctrl scope var
$scope.filters = {
name: '',
info: {test: '', foo: '', bar: ''},
yep: ''
// etc ...
}
// ctrl watch ?
$scope.$watch('filters', function(newVal, oldVal) {
if(newVal !== oldVal) {
// call with updated filters
}
}, true);
// or ctrl watch collection ?
$scope.$watchCollection('filters', function(newVal, oldVal) {
if(newVal !== oldVal) {
// …我在angularJS应用程序中有两个自定义指令.一个充当父母,另一个充当孩子.我试图访问子指令内的父范围.但我没有得到所需的输出.
<div ng-controller="CountryCtrl">
{{myName}}
<div ng-controller="StateCtrl">
<state nameofthestate="'Tamilnadu'">
<city nameofthecity="'Chennai'"></city>
</state>
</div>
</div>
我的剧本看起来像
var app = angular.module("sampleApp",[]);
app.controller("CountryCtrl",function($scope){
$scope.myName = "India";
});
app.controller("StateCtrl",function($scope){
});
app.directive("state",function(){return {
restrict : 'E',
transclude: true,
scope : { myName : '=nameofthestate'},
template:"** {{myName}} is inside {{$parent.myName}}<br/><ng-transclude></ng-transclude>"
}});
app.directive("city",function(){return {
restrict : 'E',
require:'^state',
scope : { myName : '=nameofthecity'},
template:"**** {{myName}} is inside {{$parent.myName}} which is in {{$parent.$parent.myName }}<br/> "
}});
相应的JSFiddle可在https://jsbin.com/nozuri/edit?html,js,output中找到
我得到的输出是
India
** Tamilnadu is inside India
**** Chennai is …Angular noob在这里.我正在创建一个指令,以递归方式显示问题树和子问题.我在模板中使用一个链接来调用范围内的函数.出于某种原因,它不会调用该editQuestion()方法.
这是代码和小提琴http://jsfiddle.net/madhums/n9KNv/
HTML:
<div ng-controller="FormCtrl">
<questions value="survey.questions"></questions>
</div>
使用Javascript:
var app = angular.module('myApp', []);
function FormCtrl ($scope) {
$scope.editQuestion = function (question) {
alert('abc');
};
$scope.survey = {
// ...
}
}
app.directive('questions', function($compile) {
var tpl = '<ol ui-sortable' +
' ng-model="value"' +
' class="list">' +
' <li ng-repeat="question in value | filter:search"' +
' <a href="" class="question">' +
' {{ question.name }}' +
' </a>' +
' <span class="muted">({{ question.type }})</span>' +
' <a …给定有条件禁用的文本输入字段使用ng-disabled="truthy_scope_variable",AngularJS在第一次伪造范围变量时禁用该字段,但在后续更改时不启用它.结果,该字段保持禁用状态.我只能假设出错了,但Console日志是空的.
真实范围变量与单选按钮模型绑定,我甚至$watch可以更改,但输入字段ng-disabled不能按预期工作.我已手动尝试调用$apply,但看起来Angular正在触发DOM更改.
$scope.new_account = true
<input type="radio" ng-model="new_account" name="register"
id="radio_new_account" value="true" />
<input type="radio" ng-model="new_account" name="register"
id="radio_existing_account" value="false" />
<input type="password" ng-disabled="new_account" id="login-password"
name="password" ng-model="password" />
如果我最初设置$scope.new_account = false,该字段将被禁用,但永远不会重新启用.为什么会这样？
是否可以检查指令中是否存在给定属性,理想情况下使用隔离范围,或者在最坏情况下是属性对象.
使用看起来像这样的指令<project status></project>,我想有条件地呈现状态图标,但仅当status属性存在时.
return {
restrict: 'AE',
scope: {
status: '@'
},
link: function(scope, element, attrs) {
scope.status === 'undefined'
}
}
理想情况下,它将直接绑定到范围,以便可以在模板中使用它.但是,绑定变量的值未定义.这同样适用于& 只读和= 双向绑定.
我知道通过添加a来解决这个问题很简单<project status='true'></project>,但对于我经常使用的指令,我宁愿不必这样做.(XHTML有效性,不是问题).
该$apply函数可以在任何范围内运行,包括$rootScope.
如果我在本地范围内运行它或者我在我的运行中运行它会有什么不同$rootScope吗？
我问,因为我想创建一个包含给定函数的辅助函数$apply.要做到这一点,我总是需要传入一个范围,这是A)烦人和B)不容易,因为我不一定有本地范围.
我想总是有帮助我的函数调用$apply的$rootScope,但如果有在做一些风险.
我对Angular很新,但已经阅读了很多.我正在读关于ng-transclude在http://docs.angularjs.org/guide/directive#creating-custom-directives_demo_isolating-the-scope-of-a-directive,我想我理解正确它做什么.
如果您有一个适用于其中包含内容的元素的指令,例如in
<my-directive>directive content</my-directive>
它将允许您在指令的模板中标记元素,ng-transclude并且元素中包含的内容将在标记元素内呈现.
因此,如果模板myDirective是<div>before</div><div ng-transclude></div><div>after</div>
,它将呈现为之前的指导内容.
这一切都很好我的Q是否有可能以某种方式将一个html块传递给我的指令？
例如
假设指令用法如下所示:
<my-multipart-directive>
<part1>content1</part1>
<part2>content2</part2>
</my-multipart-directive>
并有一个模板,如:
<div>
this: <div ng-transclude="part2"></div>
was after that: <div ng-transclude="part1"></div>
but now they are switched
<div>
呈现为
<div>
this: <div ng-transclude="part2">content2</div>
was after that: <div ng-transclude="part1">content1</div>
but now they are switched
<div>
？
(想到自己)我可以以某种方式将节点的HTML值绑定到模型,这样我就可以以这种方式使用它,而无需将其称为"transclude"......
谢谢
在我将更改添加到$ 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/
提前致谢!
我遇到了一个我无法调试的错误.
外形field.html
<div class='row form-group' ng-form="{{field}}" ng-class="{ 'has-error': {{field}}.$dirty && {{field}}.$invalid }">
<label class='col-sm-2 control-label'> {{ field | labelCase }} <span ng-if='required'>*</span></label>
<div class='col-sm-6' ng-switch='required'>
<input ng-switch-when='true' ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' required ng-change='update()' ng-blur='blurUpdate()' />
<div class='input-group' ng-switch-default>
<input ng-model='record[field][0]' type='{{record[field][1]}}' class='form-control' ng-change='update()' ng-blur='blurUpdate()' />
<span class='input-group-btn'>
<button class='btn btn-default' ng-click='remove(field)'><span class='glyphicon glyphicon-remove-circle'></span></button>
</span>
</div>
</div>
<div class='col-sm-4 has-error' ng-show='{{field}}.$dirty && {{field}}.$invalid' ng-messages='{{field}}.$error'>
<p class='control-label' ng-message='required'> {{ field | labelCase }} is required. </p>
<p class='control-label' ng-repeat='(k, v) in types' ng-message='{{k}}'> …