Angularjs中this的指向

在Angularjs中this的指当前的scope。

<a class=" ng-click="remove(this)"></a>

<!--this指的是a标签作用域下的scope-->

<script>

app.controller(‘myCtrl‘,function($scope){
      $scope.remove = function (scope) {
        scope.remove();
      };
});
</script>

来自知乎的解释,https://www.zhihu.com/question/35780175

作者:Stark伟
链接:https://www.zhihu.com/question/35780175/answer/64416775
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

比如你定义了一个

<div ng-click="change()">{{value}}</div>

然后你想点击这个div的时候改变这个div的内容,那么在相应的controller中应该这样写:

$scope.change = function(){
    this.value = ‘new value‘;
    //等价于$scope.value = ‘new value‘
}

这种this的特性在ng-repeat中非常好用。
比如你有一堆ng-repeat渲染出来的东西:

<div ng-click="change()" ng-repeat="item in items">{{item.value}}</div>

然后你想给他们绑定一个统一的函数,点击之后只会把自己的值改变,此时this就是指向当前的子scope:

$scope.change = function(){
    this.item.value = ‘new value‘;
    //由于是ng-repeat出来的,所以这里this指向的scope是上面那个案例中$scope的子集。
    //即this.$parent === $scope;
}
时间: 2024-08-24 02:01:19

Angularjs中this的指向的相关文章

angularjs 中的scope继承关系——(2)

转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include 假设在我们的 controller 中, $scope.myPrimitive = 50; $scope.myObject = {aNumber: 11}; HTML 为: <script type="text/ng-template" id="/tpl1.html&quo

浅谈AngularJS中的指令和指令间的相互通信

说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <h

夺命雷公狗—angularjs—22—bind改指向和传参方式

在angularjs中的传参的jquery的方式是极度相似的噢,而且还可以通过bind来改变指向 <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js&qu

浅谈angularJs中的$watch的用法

大家都是到angularJS中非常屌的一个性能,数据双向绑定,这就意味着view中的数据发生任何变化的时候,这个变化也会相应的反映到scope上,也就是说scope的模型会动态更新.所以有时候我们的需求可能是要监控摸个model的变化,下面就简单的说下这个操作以及实现原理 $watch $watch可以很方便且简单的监控一个model的变化,举个栗子: <html> <head>     <script src='./lib.angular.min.js'></s

AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step-6 npm start 1.效果 相较于前一篇文章,明显感觉多了图片,那么这些图片是怎么加载进去的呢?这里图片各不一样,如果用传统的方式去加载图片可能要写很多代码,这里看一下angularjs是如何实现的?? 2.实现代码 app/index.html <ul class="phones"> <li ng-repeat="

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

javascript中this的指向

作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. 但是随着函数使用场合的不同,this的值会发生变化.有一个原则不会变,那就是this指的是,调用函数的那个对象. demo1: 此时函数运行的结果是 1 ,x是全局变量,因为匿名函数demo()是被window调用的,原始写法是window.demo(),因为demo()是被window调用的,所

了解Js中的this指向

Js中的this对象是在运行时基于函数的执行环境绑定的,其中的this指向很不好理解,一不小心就用错了位置;. this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象. 对于this指向的理解,我分以下几种情况来说, this的指向: 1.在全局函数中,this等于window: var name="cyp"; console.log(this); 2.当函数被用作为某个对象的方法调用时,this等于哪个对