- AngularJS and scope.$apply
- 举个栗子
- angular.copy
- angularjs路由参数
- 关于angular限制跨域的问题
- Disable ng-click in AngularJS
AngularJS and scope.$apply
$apply决定什么事件进入angular content。
当你点击带有ng-click的元素时，事件就会被封装到一个$apply调用。如果你有一个ng-model="foo"的输入框，然后敲一个f，事件就会被调用$apply("foo='f';")。
angular什么时候不会自动$apply？
用jquery写的代码，应用双向绑定的时候数据并没有自动更新。
原因：jquery没有调用$apply,事件没有进入angular content，而angular content没有变化，$digest循环永远不会执行。
举个栗子
app.directive('OnClick', function() {
return {
restrict: 'E',
scope: {
foo: '='
},
template: "<div><h1></h1></div>",
link: function(scope, element, attrs) {
element.bind('click',
function() {
scope.foo++;
});
}
}
});
app.controller('MainCtrl', function($scope) {
render = function() {
$scope.foo = 0;
};
init = function() {
render();
};
init();
});
我想在点击h1的时候，foo都会自动加1，但并没有看到数据跟新。why？因为点击事件是一个没有封装到$apply里的常见的事件。
虽然数据没有跟新，但$scope确实改变了，然而并没有强制执行$digest循环，这样一来，监视angualr content变化的$watch就不会执行。
解决方法：
这需要我们手动执行一次$apply，调用他会强制执行一次$digest循环，那么$watch就会看到这些变化了，dom也就会被更新了。
element.bind('click', function() {
scope.foo++;
scope.$apply();
});
优化：
element.bind('click', function() {
scope.$apply(function() {
scope.foo++;
})
});
angular.copy
具体看angular的api文档
angularjs路由参数
关于angular限制跨域的问题
Disable ng-click in AngularJS
现在有一个需求是，我只触发一次点击事件，再点击我就不触发了，我开始想到的是加一个变量标志就好了，当然这是可以的。但下面这种写法更好。
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<button ng-click="disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Disable ng-click</button></div>
</body>
angular.module('ngToggle', []).controller('AppCtrl', ['$scope',
function($scope) {
$scope.isDisabled = false;
$scope.disableClick = function() {
alert("Clicked!");
$scope.isDisabled = true;
return false;
}
}]);