代码之家 › 专栏 › 技术社区 › smith

单击事件后未在视图中反映的范围属性

angularjs html javascript

smith · 技术社区 · 7 年前

我刚接触到Angular,尝试实现自定义指令。

我要做的是通过自定义指令中的链接函数更改单击事件后作用域上的属性。

虽然它确实表明范围属性在“开发人员工具”中发生了更改,但在视图中没有反映出来。

视图:

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>IndexPage</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="new.js"></script>
</head>
<body ng-controller="mycontroller as c">
<div> data from mycontroller is: {{c.data}}</div>
<div get-data></div>
</body>
</html>

应用程序:

var app=angular.module("app",[]);

app.controller("mycontroller",function(){
this.data="france will win the wrld cup";
});
//controller end

app.directive("getData", function($compile){
return{
restrict: "EA",
template: "<div>click me:  </div>",
link:function (scope,elem,attr){
elem.bind("click",function(){
    console.log(scope);
    $compile(scope);
    scope.c.data="croatia will win the world cup";
    console.log(scope.c.data);
}); 

}
};
//object

});

单击事件后输出:

来自MyController的数据是:法国将赢得WRLD杯

单击我:

1 回复 | 直到 7 年前

er-sho 7 年前

如你所说

虽然它确实表明范围属性在“开发人员工具”中发生了更改,但在视图中没有反映出来。

因为您的视图不知道控制器中的值已经更改,并且它显示旧值您必须通知视图该值已从控制器更改,因此可以使用 适用范围:$apply 在你的指示中。

scope.$apply(function () {
      ...
});

请看下面的链接文章并仔细阅读整页。你会对范围有一个完整的概念。

https://www.sitepoint.com/understanding-angulars-apply-digest/

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前