angular directive的写法

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30594001

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量66

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/floraCnblogs/p/angular-directive-write.html

本文介绍了AngularJS中指令和控制器的基本用法及实例。包括使用angular.module创建模块，定义控制器并通过函数设置作用域变量，以及如何定义自定义指令等。这些示例展示了AngularJS在构建动态Web应用方面的强大能力。

angular.module('MyApp', [])
.controller('Ctrl', function($scope) {
  vm = $scope;
})
.directive('multPicture', function() {
  return {
    replace: true,
    restrict: 'EA',
    scope: {
      pictures: "=",
      picHeight: "=",
      picWidth: "="
    },
    transclude: true,
    template: 'this is a directive',
    link: function(scope, element, attrs) {
    }
  }
});

2.常用

angular.module('MyApp',[])
.directive('zl1',zl1)
.controller('con1',['$scope',func1]);
function zl1(){
  var directive={
    restrict:'AEC',
    template:'this is the it-first directive',
  };
  return directive;
};
function func1($scope){
  $scope.name="alice";
}

3. 同二一个意思

angular.module('myApp',[])
.directive('zl1',[ function(){
  return {
    restrict:'AE',
    template:'thirective',
    link:function($scope,elm,attr,controller){
      console.log("这是link");
    },
    controller:function($scope,$element,$attrs){
      console.log("这是con");
    }
  };
}])
.controller('Con1',['$scope',function($scope){
  $scope.name="aliceqqq";
}]);