AngularJS1.X中数据绑定的示例分析-创新互联

这样就可以了。

4、ng-bind-template

ng-bind只接受单个数据绑定表达式，而ng-bind-template则相对灵活些。

 
 


 
  
 

 
 
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope,$sce){
   $scope.data1 = "我";
   $scope.data2 = "中国";
  })
 

5、ng-non-bindable

有时我们使用了{{}}但是我们并不是要绑定数据，直接用会出错，所以要像这样

 
 


 
  ng中绑定数据的方法是{{data}}
 

 
 
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   //$scope.data = "你好啊！";
  })
 

6、双向数据绑定ng-model

双向数据绑定允许元素从用户处收集数据以改变程序状态。

 
 


 
  
{{data}}
  
 
  
 
 
 
  angular.module('myApp',[])
  .controller('dataCtrl',function($scope){
   $scope.data = "你好啊！";
  })
 

你会发现文本框的内容和h2中的内容同步变化。

7、小结一下

与数据绑定的相关指令如下

关于“AngularJS1.X中数据绑定的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。