1

独自のWeb要素を作成したいと思います。たとえば、これは単純なグラフィック要素です。

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

app.directive('gx', function(){
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {w: '@',
            h: '@'},
    template: '<svg class="gx" ng-transclude></svg>',

    controller: function ($scope, $element) {
      var children = $scope.children = [];
      this.addChild = function (c) {
        children.push(c);
      };
    },
    link: function (scope, element, attrs, gxCtrl){
      if (gxCtrl) gxCtrl.addChild(scope);
      scope.$watch('w+h', function(val){
        var w = scope.w||"100%",
            h = scope.h||"100%";
        $(element).attr("height", h).attr("width", w);
      });
    }
  };
});

私のページでそれを宣言するとき、私は使用しなければなりません

<html ng-app="myApp">

これをデフォルトのディレクティブとしてインストールして、すべてのディレクティブと同じように、「myApp」名を指定せずに.jsファイルをインクルードしてhtml要素の使用を開始できるようにすることはできますngか？

4

1 に答える 1

9

AngularJSのコア機能の1つは、モジュール性です。別のファイルにディレクティブモジュールを作成し、それにディレクティブを追加できます。

angular.module('directives',[])
.directive('gx', function(){
  return {/** directive definition object **/ };
});

モジュールをに定義しdirectives.js、アプリをに定義しますapp.js

<script src="directives.js"></script>
<script src="app.js"></script>

次に、ディレクティブモジュールをアプリに挿入します

var app = angular.module('myApp', ['directives']);

例： http： //plnkr.co/edit/OgNr4Qx3SBbWwcH9NSfu？p = Preview

于 2012-12-14T02:14:01.287 に答える