angular入門--綁定字符串

時間 2020-01-14 標籤 angular 入門綁定字符串

要使用angularjs，首先得下載而且在頁面中調用它html

先上源碼html5

<html ng-app="app1">
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>angularJs Test</title>
	<script src="angular.min.js"></script>
  </head>
  <body ng-controller='ctrl1' >
	<span ng-bind='name'>aaaaaaaaaaaa</span>
	<script>
	var app=angular.module('app1',[]);
	app.controller('ctrl1',['$scope',function($scope){
		$scope.name="China";
	}])
	</script>
  </body>
</html>

幾個說明git

1.ng-app表明這是一個angularJs appangularjs

2.ng-controller表明這是一個控制器，簡單來說它定義了做用域；github

3.如何綁定字符串app

<span ng-bind='name'>aaaaaaaaaaaa</span>

<span ng-bind-template='this is :{{name}}'>aaaaaaaaaaaa</span>

第一種方式直接綁定了scope的一個變量post

第二種方式能夠在綁定scope name的狀況下，能夠在前面加上this is:this

可是不管哪一種方式，都會沖掉span裏面有的aaaaaaaaaaaaa內容spa

效果以下code

第一種解析結果

第二種解析結果

其實還有第三種方式，不過這種方式當angular沒有加載完時，會直接顯示在頁面上，簡單講頁面會顯示沒有解析的結果，代碼和效果也上吧

<span >aaaaaaaa:{{name}}</span>

轉載於:https://www.cnblogs.com/benchan2015/p/4797853.html