单击事件后视图中未反映scope属性



我是Angular的新手,正在尝试实现自定义指令。

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

虽然它确实显示了scope属性在"Developer tools"中发生了更改,但在视图中没有反映出来。

查看:-

<!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>

APP:-

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的数据是:法国将赢得世界杯

点击我:

正如您所说的

虽然它确实显示了范围属性在"开发人员工具"中发生了更改,但在视图中没有反映

这是因为您的视图不知道控制器中的值已经更改,并且它会向您显示旧值您必须通知视图该值已从控制器更改,因此可以使用作用域$在指令中应用

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

请看下面的链接文章,仔细阅读整页。你将完全了解范围$应用

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

最新更新