html怎么引入angularjs

html怎么引入angularjs,第1张

html中引入angularjs的方法:

1、在html的script标签中加入以下代码:

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

2、引入后调用示例:

<html ng-app="myNoteApp">

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-controller="myNoteCtrl">

<h2>我的笔记</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>

<button ng-click="save()">保存</button>

<button ng-click="clear()">清除</button>

</p>

<p>Number of characters left: <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>

<script src="myNoteCtrl.js"></script>

</body>

</html>

3、运行结果

实在是不能对jquery的ajax方法和基于页面dom的各种取值、传值方法满意(虽然jquery已经解救过我一次了),刚好手上这个项目用jquery的方法写了一半,决定试试很久以前自学的angularJS,把现在项目中jquery得部分用angularJS重写一遍。 写的时候碰到很多问题,因为刚开始用,写法思路还是和写jquery相似,导致与在一个生成select option下拉框时花费了2个小时才最终搞定。 普通html select option, 需要该字段名称name,选线id,选项label <select name="data" id="data_select"><option value="id1">a</option><option value="id2">b</option><option value="id3">c</option></select>jquery的取选项得做法 select_id = $("#data_select option:selected").val()jqueryde的思路大概是上面这样的,但是使用了angularJS后,着实让我迷惑了 angularJS在select下使用ng-option 标签生成选项实例 <select class="form-control" ng-model="bubble_inputs.y" ng-options="y.name for y in basic_data.frameworks_y" >生成的html dom如下: <select class="form-control ng-valid ng-dirty" ng-model="bubble_inputs.x" ng-options="x.name for x in basic_data.frameworks_x" ><option value="0">x1</option><option value="1">x2</option><option value="2">x3</option><option value="3">x4</option>... </select>看见这个输出,我发现没法把id写在option >value上 这岂不是无法获取选项信息了?这不行,万万不行 。结果开始了长时间的google,还是没有解决办法,就只能生成这种只有label的option,这咋办呢?难道要用ng-repeat生成option? <select class="form-control" name="y_id" id="type_y"><option ng-repeat="framework_y in basic_data.frameworks_y" value="{{framework_y.id}}">{{framework_y.name}} </option></select>我甚至开始这么尝试了,但是我的理智战胜了偷懒的邪念,决定通过ng-click取model里的值看一看,结果console.log出来一看,发现自己一个多小时都傻x了。看看console里的结果: Object {bubble_name: "ab", bubble_description: "b", x: Object, y: Object, series: Object} bubble_description: "b" bubble_name: "ab" series: Object x: Object y: Object date: "2014-03-11 09:03:22" description: "" disable_flag: "1" id: "9" name: "y3" position: "1" team_id: "8" type: "y" __proto__: Object __proto__: Object angularJS根据model的名称早就把每个相关的input的值自动放在Object中了 根本不在需要什么value=‘id’,只要把model的object从接口中取出来,放在html页面上,、选中的option的全部数据angularJS自动就帮我取到controller中得点击事件中去了

jqLite in angularjs

angular.element("#element-id")

这是一个DOM *** 作。Angular不会帮助你获得DOM的某个属性。

你需要使用的是DOM选择器,不管是原生的也好或者像jQuery这样的库也好。

获取ID的目标地是为了 *** 作DOM, Angular的设计思想不是这样的, 你应该用directive代替.

directive的link函数已经把作用域,元素,属性数组注入到link函数调用的参数当中了.

link(scope,element,attrs)

关于directive的详细解释,请参考: 创建自定义"指令"

转载,仅供参考。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6105556.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存