0

我有一个被整个应用程序使用的全局搜索变量

newspaper.controller("MainController", function($scope) {
    $scope.search = {query:''};
});

然后我有一个我想绑定到 $scope.search 的 contenteditable div

app.directive('search', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div ng-model="query" id="search"></div>',
        scope: { 
            query: '='
        },
        controller: function($scope) {
            // I want to watch the value of the element
            $scope.$watch('query', function(newValue, oldValue){
                console.log(newValue);
            },true);
        },
        link: function(scope, element, attrs) {
            // Medium JS content editable framework
            new Medium({
                element: element[0],
                mode: Medium.inlineMode
            });
        }
    }
});

当我在 div 中输入新值时手表没有触发，我想我仍然对如何将指令与模型链接感到困惑。这是HTML

  <nav ng-controller="MainControllerr">
    <search context="search.query"></np-search>
  </nav>
4

1 回答 1

0

不要认为你需要watch. 无论如何，在控制器中使用watch函数是不好的做法，因为这会使它们很难测试。

这是您尝试做的（我认为）的简化版本。

演示

索引.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body>

    <nav ng-controller="MainController">

      <pre>{{query}}</pre>

      <search query="query"></search>
    </nav>
  </body>

</html>

应用程序.js

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

app.controller("MainController", function($scope) {
   $scope.query = {value:''};
});


app.directive('search', function() {
    return {
        restrict: 'AE',

        template: '<input ng-model="query.value" id="search"/>',
        scope: { 
            query: '='
        }
    }
});

编辑

如果你真的想使用内容可编辑的 div，你必须尝试这样的事情：

另外，请参阅这个SO question，我从中获取并修改了代码以创建下面的演示。希望能帮助到你。

演示2

索引.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body>

    <nav ng-controller="MainController">

      <pre>{{query}}</pre>

      <div search contenteditable="true" ng-model="query.value">{{ query.value }}</div>
    </nav>
  </body>

</html>

应用程序.js

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

app.controller("MainController", function($scope) { $scope.query = {value:'rrr'}; });

app.directive('search', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',

        link: function(scope, element, attrs, ctrl) {

          element.bind('blur', function() {
            scope.$apply(function() {
              ctrl.$setViewValue(element.html());
            });
          });

          element.html(ctrl.$viewValue);
        }
    }
});
于 2015-07-14T01:36:53.960 回答