99re热这里只有精品视频,7777色鬼xxxx欧美色妇,国产成人精品一区二三区在线观看,内射爽无广熟女亚洲,精品人妻av一区二区三区

AngularJS 屬性值類型的自定義

2018-07-26 17:15 更新

官方代碼中的 ng-show 等算是我說的這種類型。使用時(shí)主要是在節(jié)點(diǎn)加添加一個(gè)屬性值以附加額外的功能??匆粋€(gè)簡(jiǎn)單的例子:

<p color="red">有顏色的文本</p>
<color color="red">有顏色的文本</color>

<script type="text/javascript">

var app = angular.module('Demo', [], angular.noop);

app.directive('color', function(){
  var link = function($scope, $element, $attrs){
    $element.css('color', $attrs.color);
  }
  return {link: link,
          restrict: 'AE'};
});

angular.bootstrap(document, ['Demo']);
</script>

我們定義了一個(gè)叫 color 的指令,可以指定節(jié)點(diǎn)文本的顏色。但是這個(gè)例子還無法像 ng-show 那樣工作的,這個(gè)例子只能渲染一次,然后就無法根據(jù)變量來重新改變顯示了。要響應(yīng)變化,我們需要手工使用 scope 的 $watch 來處理:

<div ng-controller="TestCtrl">
  <p color="color">有顏色的文本</p>
  <p color="'blue'">有顏色的文本</p>
</div>

<script type="text/javascript">

var app = angular.module('Demo', [], angular.noop);

app.directive('color', function(){
  var link = function($scope, $element, $attrs){
    $scope.$watch($attrs.color, function(new_v){
      $element.css('color', new_v);
    });
  }
  return link;
});

app.controller('TestCtrl', function($scope){
  $scope.color = 'red';
});

angular.bootstrap(document, ['Demo']);
</script>
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)