3

angularディレクティブの単純な基本に問題があり、新しい ng-show ディレクティブを作成する方法の最も基本的な例を望んでいました。すなわち。ng-show と同じように動作するディレクティブ ng-show2 を書きたいと思います。

angular.js ファイルでは、ディレクティブが次のように定義されているため、混乱します。

var ngShowDirective = ngDirective(function(scope, element, attr){
  scope.$watch(attr.ngShow, function(value){
    element.css('display', toBoolean(value) ? '' : 'none');
  });
});

しかし、私が目にするディレクティブの例のほとんどは、次のように書かれています。

var myApp = angular.module('myApp', []);
myApp.directive('ngShow2', function() {
    return {
        replace: true,
        restrict: 'A',
        link: function(){....}
});

正確に何と何に対応していますか?

4

2 に答える 2

5

私は AngularJS 内部の専門家ではありませんが、あなたが見ているのは [1] angular がディレクティブを内部的に作成するために使用する方法です。の署名を見ると、ほとんどの例で使用されている関数ngDirectiveと同じであることがわかります。link

ビルド プロセス中に、関数ngShowDirectiveがモジュールに追加されngます。[2]、および AFIK は公開されていません。

必要なのは、ディレクティブを実装する方法の基本的な例であるng-showため、アプリのモジュールを作成し、そのモジュールにディレクティブを追加するだけです。簡単な例を次に示します。

App.directive('ngShow2', function() {
    return {
        replace: true,
        restrict: 'A',
        link: function(scope, element, attr){
            scope.$watch(attr.ngShow2, function(value){
               element.css('display', value ? '' : 'none');
            });
        }
    };
});

jsfiddle: http://jsfiddle.net/jaimem/L7QEE/

[1] https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L36-40

[2] https://github.com/angular/angular.js/blob/master/src/AngularPublic.js#L89

于 2012-11-01T03:43:29.907 に答える
1

このコードも同様に機能します

<!doctype html>
<html ng-app="myApp" ng-controller="AppCtrl">
<script src="js/angular.min.js"></script>
<body>
<h1 ng-show2="show" ng-bind="name"></h1>
</body>
</html>​

<script>
  var app = angular.module('myApp', []);

  app.controller('AppCtrl', function AppCtrl($scope){
    $scope.name = 'Guest';
    $scope.show = true;
  });

  app.directive('ngShow2', function(){
    return function($scope, $element, $attributes){
      var expr = $attributes.ngShow2;
      $element.css('display', $scope[expr] ? '' : 'none');
    };
  });
</script>
于 2012-11-01T03:43:46.307 に答える