angularJS 独立作用域

简介: 下次要再写angularJS,会尝试一个文件写一篇文章!毕竟写的关于跟代码相关 ,不看代码,你觉得能够看懂吗?光看代码,你可能也看不懂。所以就写在这样的。

文章在我的GitHub zsj 里的angularJS 01_常用指令和控制器 。
19_独立作用域.html

可以使用一个语法:userName 就可以用了呗!用到独立作用域,只需要加
独立作用域 scope: 你是你,我是我,看自己的文档 scope的绑定策略 下面三个符号是给它用的。把作用域上值作用在指令上!
@ 关联作用域到指令
= 与
&
20_scope绑定策略.html
基础的写好!angular.module('myApp',[])

自定义属性 xiao-xue content="{{ ctrlContent}}" 就是一个指令。前面的是xiaoxue 的属性。这个属性名随便叫。 然后写到了 初始化这块
初始化一个$scope下的变量
$scope.ctrlContent = '大家好。我叫小雪'

.dirctive( ) 。弄了一个控制器,这个东西是 显示的是 展示的值,传给 写一个符号就好使。 scope : { content : '@' } 这是一种特别常见的东西,会自动把作用域上的,赋值给该指令的content属性中。传值。
感觉绕来绕去,自定义的东西不能写死。

双向绑定 21_双向绑定.html 看代码可以通过序号来查找!
比如说,把代码写出来,架构
明天会写路由。但是不确定在这里写。预估是在豆瓣里写!

当前控制器:
input type="text" ng-model="ctrlContent"
自定义指令:
xiao-xue content="ctrlContent"

上面是输入框,下面是要让自定义模板,最后,有一个input框
.controller('MainCtrl',['$scope',function ($scope){初始化}])
.directive('xiaoXue',[function () { return {restrict : 'E' , replace : true, template : '语法有些区别,想要实现两个输入框,进行关联,单项关联,显示在页面上面。 ng-model 要的是一个值 ,content 。还要加上 @ 符。 再试试等号 =

双向绑定 加上这个值,我可以正向 ‘@’ 有改变 在当前控制器,自定义控制器里的内容也随之改变。
语法规定 用了 = 要去掉大括号 。 看自定义指令的注释:
当使用 @的时候,这里要加上 {{ }} ,而使用 = 的时候不要加入 {{ }}

22_函数绑定.html
控制器和指令,先把架子打起来。看到的自定义属性,标签的属性,函数,$scope.sayHello = function (name) {}
指令 .directive('xiaoXue',[function ()])
里面是一个文本框。 ng-model关联的东西 是userName
很有特点,输入框,我要点击这个按钮,调用sayHello方法 有一定的关联。首先得有一个,ng-click=""这个方法很特殊。触发方法是sayHello 但是里写的say 需要传一个对象。
say()方法关联的就是作用域下的sayHello方法,sayHello方法需要一个参数,我们在调用say方法传参的时候,要传入一个对象,sayHello需要的形参就是这个对象的某个属性。
template : 。。say({name : userName}) ... 它是一个函数,需要一个参数,需要给个对象。 试试好不好使!运行!这个时候,使用一下会发现要加上用 & 有把函数绑定的功能!这样就可以 在控制台里可以看到,无论怎么关联,都可以看,要是不好记,粘过来,改。

相关文章
|
7月前
|
JavaScript
AngularJS中的自定义指令:创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中,可以创建自定义指令,如示例中的`myCustomDirective`。指令的属性(如`restrict`、`template`、`replace`)和方法(如`link`、`scope`)可定制其行为。在HTML中使用`restrict`指定的方式(如元素、属性等)来插入指令。遵循命名规范,避免直接DOM操作,使用隔离作用域和关注重用性与扩展性,能有效提升代码质量。自定义指令是AngularJS强大功能之一,有助于实现复杂DOM操作和组件复用。
|
JavaScript 前端开发
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JSON 数据格式 前端开发
|
Web App开发 JavaScript