什么是AngularJS指令?

2020/10/21 08:21 · javascript ·  · 0评论

我花了很多时间阅读AngularJS文档和一些教程,对于文档的难懂性,我感到很惊讶。

我有一个简单的,可以回答的问题,对于其他希望使用AngularJS的人也可能有用:

什么是AngularJS指令?

某个地方应该有一个简单,精确的指令定义,但是AngularJS网站提供了这些令人惊讶的无用定义:

在主页上

指令是AngularJS中可用的独特而强大的功能。指令可让您发明特定于您的应用程序的新HTML语法。

开发人员文档中

指令是教授HTML新技巧的一种方式。在DOM期间,编译指令将与HTML匹配并执行。这允许指令注册行为或转换DOM。

具有讽刺意味的是,一系列关于指令的讨论,似乎是在假定读者已经理解了它们是什么。

任何人都可以提供什么是指令的精确定义以供参考:

  1. 它是什么(请参阅jQuery的清晰定义作为示例)
  2. 打算解决哪些实际问题和情况
  3. 它体现了什么设计模式,或者如何适应了AngularJS声称的MVC / MVW任务。

它是什么(请参阅jQuery的清晰定义作为示例)?

指令本质上是一个函数,当Angular编译器在DOM中找到它时执行。函数几乎可以执行任何操作,这就是为什么我认为很难定义指令的原因。每个指令都有一个名称(如ng-repeat,tabs,make-up-your-own),每个指令都确定可以在哪里使用它:元素,属性,类,注释中。

指令通常仅具有(后)链接功能。复杂的指令可以具有编译功能,预链接功能和后链接功能。

打算解决哪些实际问题和情况?

指令可以做的最强大的事情就是扩展HTML。您的扩展名是用于构建应用程序领域特定语言(DSL)。例如,如果您的应用程序运行在线购物网站,则可以扩展HTML以包含“购物车”,“优惠券”,“特殊商品”等指令-在“在线购物”域,而不是“ div”和“ span”域(如@WTK所述)。

指令还可以将HTML组件化-将一堆HTML分组为一些可重用的组件。如果您发现自己使用ng-include引入了大量HTML,则可能是时候重构为指令了。

它体现了什么设计模式,或者它如何适应angularjs所谓的MVC / MVW任务

指令是您操作DOM并捕获DOM事件的地方。这就是指令的compile和link函数都将“ element”作为参数接收的原因。您可以

  • 定义一堆HTML(即模板)来替换指令
  • 将事件绑定到此元素(或其子元素)
  • 添加/删除课程
  • 更改text()值
  • 监视在同一元素中定义的属性的更改(实际上是监视的属性值-这些是作用域属性,因此该指令监视“模型”的更改)
  • 等等


在HTML中,我们有类似的事情
<a href="..."><img src="..."><br><table><tr><th>您将如何描述a,href,img,src,br,br,table,tr和th是什么?这就是指令。

也许对角指令的定义非常简单和初始

AngularJS指令(ng指令)是Angular用于扩展HTML的带有ng前缀(ng-model,ng-app,ng-repeat,ng-bind)的HTML属性。来自:W3schools角度教程

这样的一些例子是

NG-应用指令定义的AngularJS应用。

NG-模型指令结合HTML控件(输入,选择,文本区域)到应用数据的值。

NG-绑定指令结合应用数据以HTML视图。

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

查看本教程,至少对我而言,这是Angular最好的介绍之一。一种更完整的方法是@ mark-rajcok之前所说的一切。

查看文档,伪指令是可以编写angularjs解析以创建对象和行为的结构,换句话说,它是一个模板,在其中您可以使用任意节点,伪javascript和占位符的混合数据来表达意图您的小部件(组件)的结构,行为方式以及数据馈送方式。然后,Angularjs会针对这些指令运行以将其转换为有效的html / javascript代码。

那里有指令,因此您可以使用适当的语义构建更复杂的组件(小部件)。只需看一下指令的angularjs示例-它们正在定义选项卡窗格(在常规HTML中这当然是无效的)。比起使用div-s或spans来创建结构,然后将其样式设置为类似于选项卡窗格,它更直观

在AngularJS指令中,是HTML DOM元素(例如属性(restrict- A),元素名称(restrict- E),注释(restrict- M)或CSS类(restrict-C))的html re标记,它们告诉AngularJS的HTML编译器($编译)以对该DOM元素执行指定的行为,甚至转换DOM元素及其子元素。例如ng-bind,ng-hide / show等。

主页对此非常清楚:当您将鼠标悬停在上一部分的选项卡上时:

我们使用自定义tabs
元素
扩展了HTML的词汇表
tabs抽象必要的渲染选项卡的复杂的HTML结构和行为。结果是使视图更具可读性,并且语法易于重用。”

然后在下一个标签中:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

因此,您可以发明html元素,即tabs让Angle处理这些元素的呈现。

本文地址:http://javascript.askforanswer.com/shenmeshiangularjszhiling.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!