Fatal编程技术网
  • javascript/
  • Javascript 在简单指令示例中排除用法

Javascript 在简单指令示例中排除用法

javascript angularjs

Javascript 在简单指令示例中排除用法,javascript,angularjs,directive,Javascript,Angularjs,Directive,在下面的简单示例中，我正在视图上按指令从控制器打印名称模型。示例运行良好，但我无法理解transclude的用途。有人能解释一下它的用法吗 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> </head> <body ng-app="myApp" ng-

在下面的简单示例中，我正在视图上按指令从控制器打印名称模型。示例运行良好，但我无法理解transclude的用途。有人能解释一下它的用法吗

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<people></people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div>{{name}}</div>',
        transclude: true
    }
});

</script> 
</body> 
</html>


//模块声明
var-app=angular.module（“myApp”，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'人'，函数（）{
返回{
restric'E'，
模板：“{name}}”，
转移：对
}
});
基本上，如果指令中包含某些内容，它将自动替换为指令内容

例如，如果您有
Test transclude
，则在处理指令时，Test transclude字符串将自动替换为angular。但是，如果您还想显示“Test transclude”，该怎么办？这就是transclude采取行动的地方

考虑以下几点

app.directive('people',function(){
return{
    restric: 'E',
    template: '<div><div ng-transclude></div>{{name}}</div>',
    transclude: true
}

app.directive（'people'，function（）{
返回{
restric'E'，
模板：“{name}}”，
转移：对
}
}))

现在字符串“Test transclude”也将显示在标记中

这是plunker链接

您的代码并没有真正演示transclude的功能： 查看此plunk并更改真/假值：

希望你现在能注意到效果。源代码来自plunkr，经过一些修改

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="myApp" ng-controller="myCtrl"> 
<people>HI there</people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div><ng-transclude></ng-transclude>: {{name}}</div>',
        transclude: false
    }
});

</script> 
</body> 

</html>


你好
//模块声明
var-app=angular.module（“myApp”，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'人'，函数（）{
返回{
restric'E'，
模板：“：{name}}”，
排除：错误
}
});
所以当它是真的时，你会看到内容被屏蔽了

上面写着你好，彼得

如果为False，则会删除其中的HI，但保留名称和我的冒号：

：Peter

本质上，这些都是对任意内容的包装。 假设我有一个手风琴指令，它显示或隐藏你在动画中使用它的任何内容

    app.directive('akordion', [function() {
        return {
            restrict:   'A',
            replace:    true,
            transclude: true,
            template:   '<div class="accordion-wrapper">'
                          +'<div class="transcluded" ng-transclude></div>'
                        +'</div>',
            link: function(scope, elem, attrs) {
                scope.$watch(attrs.show, function(newVal){
                    toggle(newVal);
                });

                function toggle(show) {
                    var h = (show) ? 0 : '600px';
                    $(elem).css({ maxHeight: h });
                }
            }
        }
    }]);

app.directive（'akordion'，[function（）{
返回{
限制：“A”，
替换：正确，
是的，
模板：“”
+''
+'',
链接：功能（范围、要素、属性）{
范围：$watch（attrs.show，函数（newVal）{
切换（newVal）；
});
功能切换（显示）{
var h=（显示）？0:'600px'；
$（elem）.css（{maxHeight:h}）；
}
}
}
}]);
您可以这样使用它：

<div akordion="" id="league-admin">
      <div>
           foo
      </div>
      <my-directive></my-directive>
</div>


福
结果（生成的HTML）是：


福
...
关键是，通过调用
akordion=”“
，您可以获取其中的任何内容并将其放入模板中（
）。换句话说，
akordion
指令覆盖（转包）您使用它的内容

另一个例子是模态窗口。您不想每次使用定义模态的代码时都重复它，所以您只需定义一次，然后使用转换将任何内容放入其中。查看中的
modal
。

还值得注意的是，任何被转置的对象都将其
范围设置为转置的指令。在上面的示例中，
将其
范围设置为
akordion
指令

<div class="accordion-wrapper" id="league-admin">
    <div class="transcluded">
        <div>
            foo
        </div>
        <div id="my-directive">...</div>
    </div>
</div>