天道酬勤,学无止境

AngularJS 和指令的初学者问题 - 包装 jQuery 组件(Beginner questions with AngularJS and directives - wrapping a jQuery component)

问题

首先,我应该提到我正在努力过渡到客户端编程。 我对 js 很陌生。 我以前的经验主要是 C 和一些汇编。 几年前我还做了一些非常简单的 php,当时它还是 4.0。 简而言之,对 javascript 来说是新手,但我会稍微考虑一下。

我已经做了很多搜索和潜伏,但无法纠正我的问题。

我正在弄清楚 AngularJS 的一些基础知识,它非常好,但是我很难理解指令的工作原理以及如何从自定义控件访问数据。

长话短说,我正在尝试使用 angularjs 为引导程序制作一个自定义控件,以便我可以在表单中正确使用它。

这是控件:http://tarruda.github.com/bootstrap-datetimepicker/

我还有一些其他的控件想要进行,但我想如果我可以让这个控件运行起来,我可能会很容易地得到其他控件。

这是我目前拥有的基本框架的链接:http://jsfiddle.net/uwC9k/6/

首先,我试图在模板工作后如何初始化控件(我认为此时我几乎是这样做的)

link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $('#' + scope.dpid).datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
}

当我把它放在链接指令中时,它什么也不做。 我什至没有看到任何错误。 scope.dpid 确实显示了控件的 ID,所以我认为它会起作用。 但是,唉,我对 javascript 的微弱理解告诉我,我超出了范围,或者一些我无法访问该元素的废话。

一旦我开始这样做,我也不完全确定如何以表格形式访问这些数据。

任何帮助是极大的赞赏。

更新得到了基本的工作,现在我需要知道如何将数据从新控件获取到我的控制器中。 这是更新的新 jsfiddle 的链接。 http://jsfiddle.net/tmZDY/1/

更新 2我想我对如何使这些数据可访问有一个想法,但是我对 javascript 知识的缺乏让我再次感到厌烦。

当我创建对象时,我就是这样做的。

var elDatepicker = element.datetimepicker({
language : 'en',
pick12HourFormat : true,
});

但是,当我尝试使用这个对象时,它似乎没有得到正确的对象,或者我只是缺少一些基本知识。 无论哪种方式,这肯定会让我感到愚蠢。

console.log(elDatepicker.getDate());

这个失败了,getDate确实是一个方法,至少在插件的代码中看起来是这样的。

回答1

您可以使用find()模板的第一个div代替隔离范围,然后应用datetimepicker() 。 因此,您的 HTML 中不需要id

<datepicker model="mydate"></datepicker>
mydate = {{mydate}}

我还建议replace: true

.directive('datepicker', function ($parse) {
    return {
        restrict: 'E',
        replace: true,
        template: '<div class=\"well\"><div class=\"input-append\">'
         + '<input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>'
         + '<span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\"></i></span>'
         + '</div></div>',
        link: function (scope, element, attr) {
            var picker = element.find('div').datetimepicker({
                language: 'en',
                pick12HourFormat: true
            });
            var model = $parse(attrs.model);
            picker.on('changeDate', function(e) {
               console.log(e.date.toString());
               console.log(e.localDate.toString());
               model.assign(scope, e.date.toString());
               scope.$apply();
           });
        }
    };
})

小提琴

$parse 有点棘手。 我展示的是它的主要用例:我们解析一个属性并返回一个函数,该函数上有一个assign()方法,允许我们更改范围属性。

回答2

一种方法可能是这样,如this fiddle所示。 http://jsfiddle.net/uwC9k/10/

由于必须用模板字符串替换datepicker元素,这将是使用 compile 函数的一个很好的用例。 所以在编译函数中,我用模板字符串替换了datepicker元素。

编译完成后,我们将进入链接函数,它只是从编译函数内部返回的函数。 链接函数将使用日期选择器功能初始化此<div class=\"input-append\">元素

element.datetimepicker({
                      language: 'en',
                      pick12HourFormat: true
                });

由于您包含 jquery,因此链接函数中的元素属性是 jquery 扭曲元素。 所以你可以直接调用datetimepicker方法。

回答3

您可以将 datetimepicker 之类的类添加到必须转换为datetimepicker的 div 中,然后使用该类查找元素。

.directive('datepicker', function() {
    return {
        restrict: 'E',
        template: '<div class=\"well\"><div id={{dpid}} class=\"input-append datetimepicker\"><input data-format=\"MM/dd/yyyy HH:mm:ss PP\" type=\"text\"></input>    <span class=\"add-on\"><i data-time-icon=\"icon-time\" data-date-icon=\"icon-calendar\">      </i>    </span>  </div></div>',
        scope: { dpid: '@'},
        link: function(scope, element, attr) {
            attr.$observe('dpid', function(value) {
                if(value) {
              $(element).find('.datetimepicker').datetimepicker({
                  language: 'en',
                  pick12HourFormat: true
            });
                }
            });
        }
    };
})

演示:小提琴

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如果我有jQuery背景,那么“ AngularJS中的思考”吗? [关闭](“Thinking in AngularJS” if I have a jQuery background? [closed])
    问题 关门了。 这个问题需要更加集中。 它当前不接受答案。 5年前关闭。 已锁定。 该问题及其答案被锁定,因为该问题是题外话,但具有历史意义。 它目前不接受新的答案或互动。 假设我熟悉用jQuery开发客户端应用程序,但是现在我想开始使用AngularJS。 您能描述必要的范式转换吗? 以下是一些可以帮助您确定答案的问题: 我如何以不同的方式设计和设计客户端Web应用程序? 最大的区别是什么? 我应该停止做什么/使用; 我应该开始做什么/使用呢? 是否有服务器端注意事项/限制? 我不是要在jQuery和AngularJS之间进行详细的比较。 回答1 1.不要设计您的页面,然后通过DOM操作对其进行更改 在jQuery中,您可以设计一个页面,然后将其动态化。 这是因为jQuery是为增强而设计的,并且在此简单前提下得到了不可思议的发展。 但是在AngularJS中,您必须从头开始,牢记架构。 您不必从“我拥有DOM的这个部分,但我想使其成为X”开始,而是必须从要完成的事情开始,然后开始设计应用程序,然后最后开始设计视图。 2.不要用AngularJS扩充jQuery 同样,不要以jQuery做X,Y和Z的想法开始,所以我只在模型和控制器的基础上添加AngularJS。 当您刚开始时,这确实很诱人,这就是为什么我总是建议新的AngularJS开发人员根本不使用jQuery
  • AngularJS与jQuery有何不同(How is AngularJS different from jQuery)
    问题 我只知道一个js库,那就是jQuery。 但是我小组中的其他编码人员正在将AngularJS更改为新项目中的默认库。 我对此一无所知。 与jQuery有何不同? 我已经为jQuery中的类似任务完​​成了一组功能。 我还能在AngularJS中使用jQuery吗? 回答1 Angular 1是一个框架,而Angular 2是一个平台。 (参考) 对于开发人员来说,Angular2提供了一些功能,除了在屏幕上显示数据外。 例如,使用angular2 cli工具可以帮助您“预编译”您的代码并生成必要的javascript代码(摇树)以将下载大小减小到35Kish。 Angular2模拟了Shadow DOM。 (参考) 这为服务器渲染打开了一扇门,该服务器渲染可以解决SEO问题并可以与在浏览器上不起作用的Nativescript等一起使用。 官方文件网站 ng-conf 2016的第一天主题演讲资源链接原始内容:基本上,jQuery是一个不错的工具,可用于您操纵和控制DOM元素。 如果只关注DOM元素而不关注Data CRUD,例如构建网站而不是Web应用程序,那么jQuery是顶级工具之一。 (您也可以为此目的使用AngularJS。) AngularJS是一个框架。 具有以下特点 双向数据绑定 MVW模式(MVC-ish) 模板自定义指令(可重用组件,自定义标记)
  • 在自定义AngularJS标签中需要一些绑定属性的示例(Need some examples of binding attributes in custom AngularJS tags)
    问题 我正在尝试创建类似于以下内容的自定义标签: <mytag type="Big" /> 其中type是绑定到组件的属性。 以此方式将文本设置在标签中,如下所示: <label>{{type}}</label> ...(其他组件)... 如文档所述,我有一个设置默认类型的控制器: $scope.type = "Small"; 因此,如果我使用没有属性类型的标记仍会设置。 我正在尝试使用指令进行绑定: angular.module('TestPage',[]) .directive('mytag',function() { return { restrict: 'E', templateUrl: 'component.html', scope: { type: '=' } } }); 请注意,我在组件模板(ng-app =“ TestPage”)中确实具有适当的ng-app设置。 我的问题是绑定到类型似乎并没有实际绑定任何东西。 我已经阅读了有关如何使用指令将变量绑定到组件的文档。 根据文档,您可以在合并范围内进行此类绑定。 范围显然可以包含一个“对象哈希”(无论是什么!),它创建了一个称为“隔离范围”(???)的东西。 这样的范围可以通过以下方式表示“本地属性”: @或@attr-将本地范围属性绑定到DOM属性。 由于DOM属性是字符串,因此结果始终是字符串。
  • jquery-steps 进入 angularjs 指令(jquery-steps into a angularjs directive)
    问题 我正在处理我的第一个 angularjs 指令。 我希望将 jquery-steps (https://github.com/rstaib/jquery-steps) 包装成一个指令。 当我尝试将步骤内容中的输入或表达式绑定到它们未绑定的控制器模型时,我的问题就出现了。 我所拥有的示例代码如下。 angular.module('foobar',[]) .controller 'UserCtrl', ($scope) -> $scope.user = name:'John Doe' .directive 'wizardForm', () -> return { restrict: 'A', link: (scope, ele) -> ele.steps({}) } html 如下所示 <div ng-controller="UserCtrl"> <div class='vertical' wizard-form> <h1> Step 1 </h1> <div>Name: {{user.name}}</div> <h1> Step 2 </h1> <div> Advanced Info etc</div> </div> </div> 步骤 1 中内容的输出为 Name: {{user.name}} 我仍然是 angular 的初学者
  • 我们应该将jQuery与AngularJS一起使用吗? [关闭](Should we use jQuery with AngularJS? [closed])
    问题 关门了。 这个问题是基于意见的。 它当前不接受答案。 想要改善这个问题吗? 更新问题,以便可以通过编辑此帖子以事实和引用的形式回答。 5年前关闭。 改善这个问题 我们的网站目前正在使用jQuery库,每月的访问量约为100万。 我们希望包括以API为中心的方法,因此决定转向Javascript MVC并为此选择了angularJS。 现在我的问题是,我应该在Angular顶部使用jQuery,以便我需要重写最少的DOM操作代码,还是应该以Angular方式重写所有内容? 我们正在使用plupload,jQuery UI之类的jQuery插件。 等等在网站上。 请提出最佳迁移方式(页面加载时间也很重要)。 如果我有jQuery背景,已经经历过“ Thinking in AngularJS”了吗? 但没有得到明确的答案 回答1 关于AngularJS的好处,在进行迁移之前需要考虑。 它仅通过将变量存储在范围中来提供两种方式的绑定。 与JQuery相比,我们还需要编写代码。 以模块化方式实现(通过创建angular.module ) 将大多数代码从Javascript转换为HTML,使代码看起来更简洁。 单例模式器在那里存储数据并在多个控制器或服务之间共享。 它内置有较小版本的jQuery(称为JQlite),该版本具有大多数基本功能,但是您想在AngularJS中使用JQuery
  • Google Pagedown AngularJS指令(Google pagedown AngularJS directive)
    问题 有关此问题的改进解决方案,请参阅问题底部 我已经尝试了一段时间,以获取有关pagedown工作的指令。 这是stackoverflow使用的完全相同的编辑器。 Stackoverflow使此代码在此处可用: https://code.google.com/p/pagedown/ 互联网上有一些版本,但都无法正常运行。 我需要的是一个将与所有编辑器按钮一起出现的控件,就像在内联编码以及作为ngRepeat的一部分内联编码时一样,都将与stackoverflow一起出现。 我想使该指令在内联代码中以及在使用Angular版本1.2.7的ng-repeat中工作时起作用。 所需要的是,当模型数据发生更改时,指令需要更新Pagedown视图以显示新的问题和答案。 当用户更改Pagedown编辑区域时,指令需要能够更新模型。 当用户单击[保存]时,需要将模型数据保存到数据库(或至少保存到另一个对象以确认其有效)。 该指令需要能够响应模型中的更改,并且还必须在键入命令时或在编辑窗格中按下“更改”按钮时将其原始数据保存到模型中。 到目前为止,这就是我所拥有的。 请注意,此版本没有$ wmdInput.on('change',但它是所需内容的开始。 最重要的是,我想让它与Angular的1.2.7版本和jQuery 2.0.3一起使用。请注意,我发现1.2.2和1.2
  • AngularJS-简单的表单提交(Angularjs - simple form submit)
    问题 我正在学习AngularJs的过程,发现几乎没有任何示例可用于现实世界。 我试图对如何使用最标准的组件提交表单并将其传递给PHP文件有一个清晰的了解。 我的小提琴 有人在提交简单,无污染的表单方面有什么好的例子吗,这些表单会对我以及其他许多Angularjs初学者有所帮助。 当我说一个干净的表格时,我指的是这样的东西。 <div ng-app="myApp"> <form name="saveTemplateData" action="#" ng-controller="FormCtrl" ng-submit="submitForm()"> First name: <br/><input type="text" ng-model="form.firstname"> <br/><br/> Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea> <br/><br/> <input type="radio" ng-model="form.gender" value="female" />Female ... <input type=
  • AngularJS 如何将数据与 SVG 小部件绑定(AngularJS how to bind data with SVG widget)
    问题 我知道这通常不是使用 AngularJS 的方式,但我想知道我想要实现的目标是否可以使用 AngularJS。 如果这不是推荐的方式,您能否提供有关如何实现这一目标的提示? 请考虑我是网络编程领域的新手。 因此,在我的项目中,我使用 SVG 和 RaphaelJS 在放置在“holder”div 内的画布上绘制了几个小部件。 我正在尝试使用 AngularJS 将此小部件绑定到数据,基本上每个小部件都链接到 CustomController 中的一个对象。 初始化小部件时如何访问 CustomController? <html lang="en" style="height: 100%;" ng-app="myApp"> <head> <script type="text/javascript""> $(document).ready(function () { var canvas = Raphael('holder', '800', '600'); var widget1 = new Widget1(params); // initialize widgets here, that I need to bind to data using AngularJS // I am not able to access the CustomController here when
  • 是否存在Angularjs代码/命名约定? [关闭](Exists Angularjs code/naming conventions? [closed])
    问题 关闭。 此问题不符合堆栈溢出准则。 它当前不接受答案。 想要改善这个问题吗? 更新问题,使它成为Stack Overflow的主题。 6年前关闭。 改善这个问题 有谁知道在构建应用程序时是否存在任何官方的或最受欢迎的Angular命名约定参考? Angular具有许多不同类型的组件,例如过滤器,指令,服务等。 您是否同意在应用程序中实现引用命名约定会有意义? 例如:如果我们需要创建新的过滤器,我们应该如何命名它们,例如[Something] Filter或filter [Something]或其他名称? 同样适用于控制器,服务,指令等。 我想知道属于该范围的变量/函数是否应具有特定的前缀或后缀。 在某些情况下,有一种方法可以将它们与功能和其他功能(无角度代码)区分开来。 回答1 查看此GitHub存储库,其中描述了AngularJS应用的最佳做法。 它具有针对不同组件的命名约定。 它并不完整,但是它是由社区驱动的,因此每个人都可以做出贡献。 回答2 如果您是初学者,最好先阅读一些基本教程,然后再学习有关命名约定的知识。 我已经通过以下内容学习了Angular,其中一些非常有效。 教程: http://www.toptal.com/angular-js/a-step-by-step-guide-to-your-first-angularjs-app http:/
  • 服务,指令和模块之间有什么区别?(What is the difference between service, directive and module?)
    问题 我读了很多文档,而且越来越困惑。 我基本上不知道 服务指示模块 我看到了很多自定义组件。 有时他们使用指令,有时使用服务。 它总是以模块开头。 有人可以举例说明这三种类型之间的区别吗? 回答1 可以将模块视为连接其他许多事物的地方,例如指令,服务,常量等。模块可以注入到其他模块中,从而使您可以高度重用。 编写有角度的应用程序时,您将拥有一个顶级模块,即您的应用程序代码(没有模板)。 服务主要是控制器之间进行通信的一种方式,但是您可以将一个服务注入另一个服务。 服务通常被用作访问数据存储的一种方式,人们会包装一些角度化的API,例如ngResource。 该技术非常有用,因为它使测试(尤其是模拟)变得非常容易。 您可以使用服务来执行其他操作,例如身份验证,登录等。 指令用于创建窗口小部件或包装jquery插件之类的现有内容。 包装现有的插件可能是一个挑战,而这样做的原因是在插件和angular之间建立双向数据绑定。 如果不需要双向数据绑定,则不需要包装它们。 指令也是进行DOM操作,捕获DOM事件等的地方。您不应在控制器或服务中进行与DOM相关的工作。 创建指令可能会变得非常复杂。 恕我直言,我建议您首先查看可以满足您需求的API,或者向Angular的Google小组寻求建议。 回答2 从我自己的个人笔记(主要是文档,Google网上论坛帖子和SO帖子的摘要)中: 模组
  • vue和react,angular的区别
    1.Vue是 是一套构建用户界面的渐进式框架。最大的优势,就是实现了数据的双向绑定,而React的数据流动是单向的。 2.React中是把html和css全都写进js中。而Vue采用的是模板,就是在html中写css和js,最后再用webpack和vue-loader进行打包,这种编码方式对于初学者而言是很舒服的。 3.在React中要想更新状态,必须调用setState方法,而在Vue中只需要通过this的某种方式去更新state中的数据,这种方式更加方便。 4.Vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树 5.React严格上只针对MVC的view层,Vue是MVVM模式 6.监听数据变化的实现原理不同 7.Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化。 React默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢?这是因为Vue和React设计理念上的区别,Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒。 8.组件通信的区别 Vue中有三种方式可以实现组件通信:父组件通过props向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据
  • ng-change 中不考虑 Jquery datepicker 选择的日期 - AngularJS(Jquery datepicker selected date is not considered in ng-change - AngularJS)
    问题 请帮我解决这个问题。 我在 AngularJS 中使用 jquery datepicker。 我正在尝试获取所选日期并将其作为参数传递给函数。 为此,我使用以下代码。 网址: <input type="text" "ng-model="gettingStartDate" ng-change="newTest(gettingStartDate)" /> 日期选择器: $( "#date1" ).datepicker(); AngularJS: function getOrg($scope, $http) { $scope.newTest = function(start_date){ alert(start_date); }; } 回答1 此类复杂的 UI 组件需要包装到指令中以维护模型数据绑定。 对于 jQuery 日期选择器,您可以检查这个问题,或者在“jquery datepicker 指令”周围进行谷歌搜索。 回答2 <input type="text" id="date1" datepicker1 ng-model="gettingStartDate" /> var app = angular.module('reports', []) .directive("datepicker1", function () { return { restrict: "A"
  • 使用TypeScript和$ inject机制定义AngularJS指令(Define AngularJS directive using TypeScript and $inject mechanism)
    问题 最近,我开始重构与TypeScript一起工作的Angular项目之一。 多亏了static $inject Array<string>属性,使用TypeScript类定义控制器非常方便,并且可以与最小的JavaScript文件一起很好地工作。 而且您可以得到非常干净的代码,而无需从类定义中拆分Angular依赖项: module app { 'use strict'; export class AppCtrl { static $inject: Array < string > = ['$scope']; constructor(private $scope) { ... } } angular.module('myApp', []) .controller('AppCtrl', AppCtrl); } 现在,我正在寻找解决方案以处理指令定义的类似情况。 我发现了将指令定义为函数的好习惯: module directives { export function myDirective(toaster): ng.IDirective { return { restrict: 'A', require: ['ngModel'], templateUrl: 'myDirective.html', replace: true, link: (scope: ng.IScope
  • 创建一个模态窗口以使用 AngularJS 加载数据(Creating a modal window to load data with AngularJS)
    问题 我一直在尝试使用 AngularJS 在模态窗口中加载数据,但我不知道该怎么做。 我还需要在单击链接时更改 url,并将数据加载到模式窗口中,而不是加载新页面。 我曾尝试使用 jQuery Facebox 插件,但它似乎不起作用,我也在使用 twitter bootstrap 模态组件。 下面是我的代码: <div class="subnav span12" id="post-main-container" ng-controller="PostsController"> <div class="btn-group pull-left span5" id="sort-nav"> <a class="btn active">Popular</a> <a class="btn">Recent</a> <a class="btn">Favorite</a> </div> <div class="btn-group pull-right " id="view-nav"> <a class="btn" id="2col"><i class="icon-th-large"></i></a> <a class="btn active" id="4col"><i class="icon-th"></i></a> <a class="btn" id="6col"><i class="icon
  • AngularJS真的需要jQuery吗?(Does AngularJS really need jQuery?)
    问题 我在阅读AngularJS附带的精简版jQuery。 但是,我一直在听有关谈论Angular和jQuery并存的人的参考。 我什至检查了ng-grid并注意到它说: AngularUI团队用AngularJS和jQuery编写的Angular Data Grid 因此,如果我确实在需要jQuery的时候才使用Angular,那么AngularJS附带的版本又没有提供什么呢? 回答1 jQLite是一个非常精简的jQuery版本。 jQLite足以使angular正常工作。 这是为了最大程度地减少依赖性。 但是,如果您在angular之前加载jQuery,则angular将使用jQuery。 大多数时候,您不需要使用jQuery。 即使如此,对于初学者来说,也建议您完全省略jQuery,因为如果有一种简单/有角度的方法,则倾向于使用jQuery。 关于这个的例子太多了(当有ngShow和ngHide指令时,大多是通过jQuery显示和隐藏元素)。 稍后,当您开始编写指令时,则可能需要添加jQuery。 ngGrid可能会执行jqLite无法满足的许多要求。 因此,他们使用了jQuery 。 jqLit​​e的文档和功能:http://docs.angularjs.org/api/angular.element
  • AngularJS 1.5+组件不支持Watchers,如何解决?(AngularJS 1.5+ Components do not support Watchers, what is the work around?)
    问题 我一直在将自定义指令升级到新的组件体系结构。 我读过,组件不支持观察者。 这样对吗? 如果是这样,您如何检测对象的变化? 对于一个基本示例,我有一个自定义组件myBox ,它具有一个子组件游戏,并带有游戏绑定。 如果游戏组件中有找零游戏,如何在myBox中显示警告消息? 我知道有rxJS方法是否可以纯粹在角度上做到这一点? 我的JSFiddle 的JavaScript var app = angular.module('myApp', []); app.controller('mainCtrl', function($scope) { $scope.name = "Tony Danza"; }); app.component("myBox", { bindings: {}, controller: function($element) { var myBox = this; myBox.game = 'World Of warcraft'; //IF myBox.game changes, show alert message 'NAME CHANGE' }, controllerAs: 'myBox', templateUrl: "/template", transclude: true }) app.component("game", { bindings: {game
  • 什么是AngularJS指令?(What is an AngularJS directive?)
    问题 我花了很多时间阅读AngularJS文档和一些教程,对于文档的难懂性我感到很惊讶。 我有一个简单的,可以回答的问题,这对其他希望使用AngularJS的人也可能有用: 什么是AngularJS指令? 某个地方应该有一个简单,精确的指令定义,但是AngularJS网站提供了这些令人惊讶的无用定义: 在主页上: 指令是AngularJS中可用的独特而强大的功能。 指令可让您发明特定于您的应用程序的新HTML语法。 在开发人员文档中: 指令是教授HTML新技巧的一种方式。 在DOM期间,编译指令将与HTML匹配并执行。 这允许指令注册行为或转换DOM。 具有讽刺意味的是,有一系列关于指令的讨论,似乎是在假定读者已经理解了它们是什么。 任何人都可以提供什么是指令的精确定义以供参考,该指令解释了: 它是什么(请参阅jQuery的清晰定义作为示例) 打算解决哪些实际问题和情况它体现了什么设计模式,或者如何适应了AngularJS的MVC / MVW任务。 回答1 它是什么(请参阅jQuery的清晰定义作为示例)? 指令本质上是一个函数† ,当Angular编译器在DOM中找到它时执行。 函数几乎可以执行任何操作,这就是为什么我认为定义指令是相当困难的原因。 每个指令都有一个名称(例如ng-repeat,tabs,make-up-your-own),每个指令都确定可以在何处使用它:元素
  • angularjs 指令中棘手的范围绑定(Tricky scope binding in angularjs directives)
    问题 我想在 angularjs 中编写“就地编辑”指令。 我希望该指令是可重用的,因此我对该指令有以下要求: 它必须是一个可以装饰任何元素的属性,这是有道理的 (div,span,li) 它必须支持编辑按钮,单击该按钮会将显示的元素集更改为输入文件。 通常是一个对象的属性,例如联系人(号码、姓名) 我在这个小提琴 http://jsfiddle.net/honzajde/ZgNbU/1/ 中可以看到指令中范围可见性的欺骗行为。 在指令中注释:显示模板和范围 -> contact.number 和 contact.name 在指令中注释:scope -> contact.number only 显示没有注释掉任何东西 -> 什么都没有显示 => 当两者都被注释掉时,只需将模板添加到指令中,即使没有使用模板,它也会呈现 contact.number。 我想问一下游戏规则是什么? <div> <div ng-controller="ContactsCtrl"> <h2>Contacts</h2> <br /> <ul> <li ng-repeat="contact in contacts"> <span edit-in-place="" ng-bind="contact.number"></span> | <span edit-in-place="" >{{contact.name}}
  • 加载AngularJS部分模板后如何应用jquery(How to apply jquery after AngularJS partial template is loaded)
    问题 我有一个简单的网站,该网站实现了jQuery,以便在Index.html顶部横幅中创建带有一些图像的Slider。 现在,我想使用AngularJS,因此我将HTML代码分为多个单独的部分。 标头页脚热门横幅 如果我在原始版本中运行Index.html(不应用AngularJS模式),则可以看到滑块工作正常。 应用AngularJS模式时,我将顶部横幅HTML移到了部分html,然后将ng-view应用于顶部横幅最初所在的div。 var app = angular.module('website', ['ngRoute']); app.config(function($routeProvider) { $routeProvider. when('/about',{templateUrl:'app/partials/about.html'}). when('/contact',{templateUrl:'app/partials/contact.html'}). otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'}) }); 当我刷新页面时,滑块不起作用,呈现为没有任何jQuery效果的简单html,确实是一团糟。 此部分有一些jQuery插件,通常通过document.ready激活。 但是
  • AngularJS:指令中的 element.show() 不起作用(AngularJS: element.show() in directive not working)
    问题 我有一个指令(参见 plunk),它用样式display:none包装一个 DIV,并在一秒钟后显示其内容。 我试图用 element.show() 和 $(element).show() (包括 jQuery)让它显示,但它从来没有奏效。 超时有效,这段代码有什么问题? 这是 HTML: <hideme> Show this after one second </hideme> 这是javascript: angular.module("app", []); function MyCtrl($scope) {} angular.module("app").directive('hideme', function($timeout) { return { restrict: 'E', template: '<div style="display: none !important"></div>', link: function(scope, element, attrs) { $timeout(function() { element.show(); }, 1000); } }; }); 回答1 Plunker:http://plnkr.co/edit/bzhCwjXdll3ibxc7qsMY?p=preview 尝试使用transclude:true然后使用ng