在 angular 中观看 html 内部的自定义指令

Question

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

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

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

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 中输入新值时手表没有启动，我想我仍然对如何 link 带有模型的指令感到困惑。这是 HTML

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

Answer 1

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

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

DEMO

index.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>

app.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，我从中获取并改编了代码以创建下面的演示。希望对你有帮助。

DEMO2

index.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>

app.js

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

app.controller("MainController", 函数($scope) { $scope.query = {值:'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);
        }
    }
});

在 angular 中观看 html 内部的自定义指令

Watch a custom directives inner html in angular

angularjs

angularjs-directive

angularjs-scope

angularjs-model