angular入门--绑定字符串

要使用angularjs,首先得下载并且在页面中调用它

先上源码

<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>

几个说明

1.ng-app代表这是一个angularJs app

2.ng-controller代表这是一个控制器,简单来讲它定义了作用域;

3.如何绑定字符串

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

第一种方式直接绑定了scope的一个变量

第二种方式可以在绑定scope name的情况下,可以在前面加上this is:

但是无论哪种方式,都会冲掉span里面有的aaaaaaaaaaaaa内容

效果如下

第一种解析结果

angular入门--绑定字符串

第二种解析结果

angular入门--绑定字符串

其实还有第三种方式,不过这种方式当angular没有加载完时,会直接显示在页面上,简单讲页面会显示没有解析的结果,代码和效果也上吧

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

angular入门--绑定字符串