Question

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

点击我

Answer 1

如您所说

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

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

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

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

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

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

1 个答案: