3

我在角度指令的简单基础知识方面遇到了麻烦，我希望有一个最基本的例子来说明如何编写新的 ng-show 指令。IE。我想编写指令 ng-show2 与 ng-show 一样工作。

我很困惑，因为在 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 回答