Question

我试图创建一个使用Angular Bootstrap Popover的指令，该指令包含一个输入。一切都很好，除了手表没有触发。

该指令如下所示：

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的自定义模板。

奇怪的是，popover中的输入带有我的指令范围的searchText变量中的值定义，这是＆＃39;输入内容＆＃39; ，手表执行一次（你可以在浏览器的控制台中看到），但是当你编辑输入值时，手表就不会再发射了。

由于我使用了角度引导程序指令，我认为$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

Angular UI - 从Popover模板

1 个答案: