Question

我的代码如下：

<!doctype html>
<html ng-app="flyerGen">
<head>
<script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
<script>
angular.module('flyerGen', []).directive('contenteditable', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            // view -> model
            elm.bind('keyup', function() {
                scope.$apply(function() {
                    ctrl.$setViewValue(elm.html());
                });
            });

            // model -> view
            ctrl.$render = function() {
                elm.html(ctrl.$viewValue);
            };

            // load init value from DOM
            ctrl.$setViewValue(elm.html());
        }
    };
});
function FlyerCtrl($scope) {
    $scope.Flyer = { bgColor : '231,233,230', title : 'WIE WAREN WIR HEUTE?', description: 'Bitte scannen Sie den QR-Code und geben Sie uns Feedback' }
}

</script>
</head>
<Body>
<div contentEditable ng-model="Flyer.title">{{ Flyer.title }}</div>
Test: {{ Flyer.title }}
</div>
</Body>
</html>

加载页面时，我在控制台中看到以下错误：错误：无控制器：ngModel 。我还试图设置＆＃34; FlyerCtrl＆＃34;，也＆＃34; Flyer＆＃34;而不是＆＃34; ngModel＆＃34;，但没有任何作用。

错误在哪里？

Answer 1

一些项目：

HTML应该contenteditable而不是contentEditable
不要从DOM加载init值 - 您已经在模型中加载了它，因此请从HTML中删除它：＆lt; div ...＆gt; ~~{{Flyer.title}}~~ ＆LT; / DIV＆GT;并且最初不要调用$ setViewValue。

Plunker

AngularJS：ContentEditable的问题

1 个答案: