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

时间:2018-07-14 06:23:53

标签: javascript html angularjs

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

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

它确实表明scope属性在“开发人员工具”中已更改,但未在视图中反映出来。

  

查看:-

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

     

点击我

1 个答案:

答案 0 :(得分:1)

如您所说

,它确实表明scope属性在“开发人员工具”中已更改,但未在视图中反映出来。

这是因为您的视图不知道该值已在控制器中更改,并且显示了旧值 您必须通知视图,该值已从控制器更改,因此可以在指令中使用 scope。$ apply

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

请查看下面的链接文章,并仔细阅读整页。 您将获得有关范围的完整信息。$ apply

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