Question

我希望在输入中按Enter键时，父模型会更新。但事实并非如此。控制台日志的输出看起来很有希望，就像应该这样做。我需要使用$ watch吗？怀疑它，但我想我会问。

HTML

<div data-ng-app="testApp">
    <div data-ng-controller="testCtrl">
        <strong>{{pkey}}</strong>
        <span data-test-directive 
              data-parent-item="pkey" 
              data-parent-update="update(pkey)"></span>
    </div>
</div>

指令

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

testApp.directive('testDirective', function ($timeout) {
    return {
        scope: {
            key: '=parentItem',
            parentUpdate: '&'
        },
        replace: true,
        template: '<div><input type="text"></input></div>',
        link: function(scope, elem, attrs) {
           elem.bind('keydown keypress', function(event) {
              if (event.which === 13) {
                  scope.parentUpdate({ pkey: 'D+' + scope.key});
                  event.preventDefault();
              }
           })
        }
    };
});

CONTROLLER

testApp.controller('testCtrl', function ($scope) {
    $scope.pkey = 'golden';
    $scope.update = function (k) {
        // Expecting local variable k, or $scope.pkey to have been
        // updated by calls in the directive's scope.
        console.log('CTRL:', $scope.pkey, k);
        $scope.pkey = 'C+' + k;
        console.log('CTRL:', $scope.pkey);
    };
});

我相信我在指令中使用控制器看过这项工作，但由于我对Keypress事件感兴趣，所以我需要使用链接。

Answer 1

elem.bind只是将js函数绑定到事件，没有别的。

添加scope.$apply()。

P.S。即ng-click几乎相同：在回调后绑定事件和调用。

P.S.1。如果你可以使用更现代的角度版本 - 有ng-keypress和类似的指令。

Answer 2

范围。$ apply不适合使用。最好使用$ timeout

$ timeout不会产生类似“$ digest”的错误进展“因为$ timeout告诉Angular在当前周期之后，超时等待，这样就可以确保不会消化周期之间的任何冲突，因此$ timeout的输出将执行新的$ digest周期

为什么不能通过Angular Directive函数调用更新父模型？

2 个答案: