Angular UI - 观察弹出框模板中输入的值

Question

我正在尝试创建一个使用 Angular Bootstrap Popover 的指令，其中包含一个输入。一切正常，除了手表没有触发。

这是Plunker。

指令如下所示：

angular.module('ngUserPopover', ['ui.bootstrap'])
.directive('userPopover', function() {
    return {
        restrict: 'E',
        scope: {
            onSearch: '&',
        },
        templateUrl: 'myPopoverTemplate.html',
        link: function (scope, element, attr) {

            scope.templateUrl = 'someTemplate.html'; // url for popover content template
            scope.searchText = 'Type something'; // initial sample value for input

            scope.$watch(function () {
                return scope.searchText;
            }, function () {
                // pass the new input value in the method...
                console.log(scope.searchText);
            });
        }
    }
});

myPopoverTemplate.html 看起来像：

<button uib-popover-template="templateUrl" popover-placement="right" popover-trigger="click" class="btn btn-default">Popover With Template</button>

<script id="someTemplate.html" type="text/ng-template">
    <div>{{dynamicPopover.content}}</div>
    <div class="form-group">
      <input type="text" ng-model="searchText" class="form-control">
    </div>
</script>

按钮使用Angular Bootstrap UI popover 指令，使用自定义模板someTemplate.html。

奇怪的是弹出框内的输入带有我指令范围的searchText变量中定义的值，即'Type something'，手表执行一次（您可以在浏览器的控制台），但是当您编辑输入值时，手表不再触发。

由于我使用 angular bootstrap 指令，我认为 $watch 可以正常工作，在我的输入中用于 ng-model 的范围变量，但它不起作用（编辑时不会调用 console.log输入的值）。

有什么想法吗？

Answer 1

这是经典的 JS 原型继承问题。您需要将 ngModel 设为对象而不是原始对象，如下所示：

scope.model = {
  searchText: 'Type something'
};

scope.$watch(function() {
    return scope.model.searchText;
  }, 
  function () {
    // pass the new input value in the method...
    console.log(scope.model.searchText);
});

然后更改您输入的ng-model：

<input type="text" ng-model="model.searchText"/>

https://plnkr.co/edit/ocRBhNWLYUJ9hLE30U45?p=preview

如果你真的想让你的代码干净，你可以使用控制器而不是链接函数来处理你的指令的逻辑，那么你不必担心对象与原始的问题。另一个改进是使用ngChange而不是观察者来处理输入的变化：

 link: function (scope, element, attr) {
   scope.templateUrl = 'someTemplate.html';
 },
 controllerAs: '$ctrl',
 controller: function($scope) {
   var $ctrl = this;
   $ctrl.searchText = 'Type something';

   $ctrl.inputChanged = inputChanged;

   function inputChanged() {
     console.log($ctrl.searchText);
   }
}

模板：

<input type="text" 
  ng-model="$ctrl.searchText" 
  ng-change="$ctrl.inputChanged()"
  class="form-control">

https://plnkr.co/edit/OfhoxXYCbf7AFYiAd5zL?p=preview