对AngularJs指令的初步认识

最新推荐文章于 2018-01-15 09:10:25 发布

原创最新推荐文章于 2018-01-15 09:10:25 发布 · 603 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #扩展

angular 专栏收录该内容

5 篇文章

订阅专栏

<1>、ng-app指令定义一个 AngularJS 应用程序，通常我们将ng-app直接放在

<html ng-app="routerApp"></html>

这就告诉html是angularJs应用程序的所有者

<2>、ng-model 指令把元素值（比如输入域的值）绑定到应用程序（实现数据的双向绑定）；

在输入框里面输入内容时，对应的class=“pid”里面的内容就会改变；

 <div ng-app="">
          <p>在输入框中尝试输入：</p>
          <p>姓名：<input type="text" ng-model="name"></p>
          <p class="pid">{{name}}</p>
   </div>

也可以通过js操作改变输入框里面的内容

.controller('defaultController', function ($scope, $rootScope, $state, $stateParams, $cookieStore, ServiceList) {
        $scope.saleattr = ["早餐", "中餐", "晚餐", "夜宵"];
        $scope.activeMenu = 0;
        $scope.name = "Fiona_lms"
        $scope.setActive = function (menuItem) {
            $scope.activeMenu = menuItem
            $scope.loadsaletoday();
            $scope.load();
        }
    }

这就是所谓的数据的双向绑定。

<3>、ng-bind 指令把应用程序数据绑定到 HTML 视图，(对变量进行初始化加载)；

<4>、ng-bind-html指令用于绑定包含HTML标签的文档（解析其中的html标签），在使用该指令的时候，需要引入“angular-sanitize.js”进行安全绑定。

这里写图片描述
同时需要在模块里面配置“ngSanitize”服务，

我一直理解错了，我以为它是用来过滤html标签的，直到昨天遇到一个问题，当时我在后台取出的数据，里面包含很多html标签，我以为 $sce.trustAsHtml()是用来过滤的，所以一直在错误的方向上找问题出在哪里，结果是可想而知的，没有找到答案，后来问师父了，师父立刻帮我把问题解决了，然后我还是很懵逼啊，今天下午不是特别忙，我还是很好奇这个问题，然后自己又重新试了一下，同时查阅了一些资料，知道了原来是这样的，加不加$ sce.trustAsHtml(),就一个区别，如果标签上的样式是用style写的，如果不加的话看，浏览器是解析不出来的，但是如果样式是用class写的，浏览器还是会解析出来。
<5>、ng-if指令是判断数据是否存在，在页面数据展示的时候，经常会用到

 <div class="col-sm-6">
     <div class="convincef">{{item.MaterialName}}</div>
     <div class="convice_spam">
           <span class="font_size"  ng-if="item.SurplusQuantity">剩余：<span class="font_color">{{item.SurplusQuantity}}</span><span>{{item.UnitName}}</span></span>
            <span ng-if="item.OrderLimitNumber">限购：<span class="font_color">{{item.OrderLimitNumber}}</span><span>{{item.UnitName}}</span></span>
     </div>
     <div  ng-if="item.SellPrice" class="pic_img_bg"><span>￥{{item.SellPrice}}</span></div>
      <div ng-if="!item.SellPrice">暂无价格</div>
 </div>

<6>、ng-repeat指令是用来做循环的

 <li ng-repeat="item in data" ng-controller="eachController">
      <div class="convice_img"><img src="{{item.Img | IMG:true}}" /></div>
      <div class="convincef">{{item.MaterialName}}</div>
 </li>

<7>、ng-class指令不仅可以当类名来使用，后面还可以加表达式

 <div class="input-check" ng-click="change($index)">
    <i ng-class="{true: 'checkbox-selected', false: ''}[chose[$index]]"</i>
 </div>

 <div class="navtabs-secend">
     <ul id="secendnav">
           <li><a ui-sref="myspace.OrderManagement.orderlist" ng-class="{active:state.includes('myspace.OrderManagement')}"><div class="management"></div><p>订购管理</p></a></li>
            <li><a ui-sref="myspace.HealthyDiet.DietRecommend" ng-class="{active:state.includes('myspace.HealthyDiet')}"><div class="healthydiet"></div><p>健康饮食</p></a></li>
      </ul>
</div>

<8>filter:忽略后台数据里面的标签

.filter('to_trusted', ['$sce', function ($sce) {
    return function (text) {
        var dd = text.replace(/<\/?.+?>/g, "");
        var dds = dd.replace(/ /g, "");
        return dds
    };
}]);

使用方法：

 <div ng-bind-html="item.Content | to_trusted"></div>