[Angular] In angular world and out angular world
Angular in and out World
2023-09-14 09:00:56 时间
<html ng-app="nameApp"> <head> <meta charset="utf-8"> <title>Angular.js Example</title> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script> <script> var nameApp = angular.module('nameApp', []); nameApp.controller('NameCtrl', function ($scope){ $scope.firstName = 'John'; $scope.$watch('lastName', function(newValue, oldValue){ console.log('new value is ' + newValue); }); setTimeout(function(){ $scope.lastName = 'Smith'; $scope.$apply(); /*Without $scope.$apply(), it won't work*/ }, 1000); }); </script> </head> <body ng-controller="NameCtrl"> First name:<input ng-model="firstName" type="text"/> <br> Last name:<input ng-model="lastName" type="text"/> <br> Hello {{firstName}} {{lastName}} </body> </html>
Those pieces is outside angular world, if you don't have $scope.$apply, the lastname won't get updated.
setTimeout(function(){
$scope.lastName = 'Smith';
$scope.$apply(); /*Without $scope.$apply(), it won't work*/
}, 1000);
相关文章
- [Angular] Debug Angular apps in production without revealing source maps
- [Angular] Angular ngSwitch Core Directive In Detail
- [Angular] Remove divs to Preserve Style and Layout with ng-container in Angular
- [Angular] Fetch non-JSON data by specifying HttpClient responseType in Angular
- [Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] Create a custom validator for template driven forms in Angular
- [Angular Router] Lazy loading Module with Auxiliary router
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
- [Angular 2] Generate and Render Angular 2 Template Elements in a Component
- [Angular 2] Nesting Elements in Angular 2 Components with ng-content (AKA Angular 2 Transclusion)
- [AngularJS] Isolate State Mutations in Angular Components
- [Angular 2] DI in Angular 2 - 1
- [Angular 2] Managing State in RxJS with StartWith and Scan
- [Angular 2] Child Router
- [AngularJS] New in Angular 1.5 ng-animate-swap
- [Angular 2] A Simple Form in Angular 2
- [Angular] Communicate with Angular Elements using Inputs and Events
- [Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor
- [Angular] FadeIn and FadeOut animation in Angular
- [Angular] @ContentChild and ngAfterContentInit
- [Angular2 Router] Build Angular 2 Navigation with routerLink
- [Angular 2] Exposing component properties to the template
- Angular SSR 应用启动时的一些保护措施
- 关于 Angular HTTP Interceptor 中 Request 和 Response 的 immutable 特性
- 如何创建 Angular library 并在生产环境中消费
- Angular 路由时如何在 Component 之间传递参数
- Angular 服务器端渲染的学习笔记(二)
- Angular 依赖注入框架里 useExisting 和 useClass 的使用场景
- SAP Spartacus 中 Angular json pipe 的工作原理