Javascript 如何在angular js中编写简单的ng show指令_Javascript_Angularjs

Javascript 如何在angular js中编写简单的ng show指令

javascript angularjs

Javascript 如何在angular js中编写简单的ng show指令,javascript,angularjs,Javascript,Angularjs,我对angular指令的简单基础知识有困难，我希望得到如何编写新ng show指令的最基本示例。即，我想编写指令ng-show2，使其与ng-show的工作方式相同我感到困惑，因为在angular.js文件中，指令的定义如下： var ngShowDirective = ngDirective(function(scope, element, attr){ scope.$watch(attr.ngShow, function(value){ element.css('display

我对angular指令的简单基础知识有困难，我希望得到如何编写新ng show指令的最基本示例。即，我想编写指令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(){....}
});

但我看到的大多数指令示例都是这样写的：

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(){....}
});

什么与什么相对应？

我不是AngularJS内部的专家，但您看到的[1]是AngularJS用于在内部创建指令的方法。如果查看

ngDirective

的签名，您会注意到它与大多数示例中使用的

链接

函数相同

在构建过程中，功能

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：

[1]

[2]

此代码也适用

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



var-app=angular.module（'myApp'，[]）；
app.controller（'AppCtrl'，函数AppCtrl（$scope）{
$scope.name='Guest'；
$scope.show=true；
});
应用指令（'ngShow2'，函数（）{
返回函数（$scope、$element、$attributes）{
var expr=$attributes.ngShow2；
$element.css（'display'，$scope[expr]？''none'）；
};
});