AngularJS指令:如何更改$范围,不反映在用户界面中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我正在尝试使用AngularJS创建一些自定义元素并将一些事件绑定到它,然后我发现$ scope.var在绑定函数中使用时不会更新UI。 这是一个简单的例子,描述了问题:

HTML:

<!doctype html>
<html ng-app="test">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>

  </head>
  <body>

<div ng-controller="Ctrl2">
  <span>{{result}}</span>
  <br />
  <button ng-click="a()">A</button>
  <button my-button>B</button>

</div>


  </body>
</html>

JS:

function Ctrl2($scope) {
    $scope.result = 'Click Button to change this string';
    $scope.a = function (e) {
        $scope.result = 'A';
    }
    $scope.b = function (e) {
        $scope.result = 'B';
    }
}

var mod = angular.module('test', []);

mod.directive('myButton', function () {
    return function (scope, element, attrs) {
        //change scope.result from here works
        //But not in bind functions
        //scope.result = 'B';
        element.bind('click', scope.b);
    }
});

DEMO:http://plnkr.co/edit/g3S56xez6Q90mjbFogkL?p=preview

基本上,当用户单击按钮B时(类似于按钮A上的),我将click事件绑定到my-button并想要更改。但如果我这样做,这个观点不会更新到新的$scope.resultng-click:a()$scope.result

我应该如何解决这个问题?

提问于
用户回答回答于

事件处理程序被称为“外部”Angular,因此虽然你的$scope属性将被更新,但视图不会更新,因为Angular不知道这些更改。

在你的事件处理程序的底部调用$scope.$apply()。Angular会注意到你对$scope(因为你在HTML中$watches使用的Angular设置)所做的更改{{ ... }}并更新视图。

热门问答

求云函数可用的Pandas压缩包,一直失败,出现多个C extension问题?

配置 https 配置完后报错?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐已采纳

请检查服务器是否安装了代理?如有请尝试移除代理再尝试

另外,curl访问https时候需要确保服务器已经保存了证书,可以通过 curl -k --tlsv1 过滤

即时通信是否可以给小程序发送小卡片消息?

为什么绑定了域名之后的企业邮箱发送到Gmail被事儿别为垃圾邮件?

女淘日记

杭州吱吱吱科技 · 站长 (已认证)

推荐
可以通过设置DMARC来解决邮件被其他邮局识别为垃圾邮件的问题 TXT记录值为:v=spf1 include:spf.mail.qq.com ~all 详细参考记录: https://work.weixin.qq.com/help?person_id=1&doc_id=524&h...... 展开详请

都快要考试了,从业者认证考试的准考证怎么还没发放?

您好,本月正式考试通知已经全部发送完毕。已安排考试中心重新为您发送,请注意查收站内信、邮件、短信及腾讯云助手公众号消息 如有疑问,可联系考试中心; 电话:400-8006213/13810321135 邮箱:qcloud@ats.org.cn... 展开详请

腾讯云cos如何通过api获取文件的永久url?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐
如果文件是公有读的,那直接拼路径即访问URL,格式如 https://<Bucket>.cos.<Region>.myqcloud.com/<Key> ,不需要接口。 如果使用的sdk,比如js sdk,则可以使用 getObjectUrl 方法 var url = cos.ge...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券