Question

我希望制作自己的网络元素 - 例如，这是一个简单的图形元素：

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">

是否可以将其安装为默认指令，这样我就可以包含.js文件并开始使用html元素而无需指定“myApp”名称 - 与所有ng相同指令？

Answer 1

AngularJS的核心功能之一是模块化。您可以在单独的文件中创建指令模块，并向其添加指令。

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

如何扩展angularjs中的默认指令？

1 个答案: