自定义属性双向绑定不起作用

Custom attribute two way binding not working

本文关键字：不起作用 绑定 自定义属性      更新时间：2023-09-26

在这个例子中，我面临2个问题

https://jsfiddle.net/1g6kvxst/

  1. 显然<b>{{moo}}</b>没有更新。表达式{{moo}}不应该是 2 路绑定吗？
  2. 可能是因为第一个问题，我的手表表达式关于链接回调中的指令my-var attr 值没有更新

我错过了什么？感谢您的帮助。

视图

<section ng-app="myApp" ng-controller="myController"> <div my-directive my-var="moo"></div> <span>Result:</span> <b>{{moo}}</b> </section>

命令 

App.directive('myDirective', function () {
    return {
        restrict: 'A',
        scope:{
            myVar: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch(scope.myVar, function() {          
                console.log('my var changed to: ', scope.myVar);
            });
        }
    };
});

控制器

var ctrls = angular.module('controllers',[]);
ctrls.controller('myController', ['$scope', function ($scope) {
    $scope.moo = 0; 
    var t = setInterval(function(){
        $scope.moo++;
    },1000);
}]);

Angular 使用监视来重新计算视图中的变量。这些手表内置了Angular的异步功能，如$timeout，$http等。当使用原生setTimeout时，angular的摘要周期不会接受这种变化;

使用 angular 的 $interval 服务而不是原生 JavaScript 间隔：

var t = $interval(function(){
    $scope.moo++;
},1000);

不要忘记注入控制器： 

ctrls.controller('myController', ['$scope', '$interval', function ($scope, $interval) {

要使$watch正常工作，请观察键而不是对象：

scope.$watch('myVar', function() {

吉斯菲德尔

使用$interval，而不是setInterval，当你使用setTimeout时，angular 不会运行摘要循环，因此你的指令范围不知道任何变化。

相关文章：