angular自定义指令双向绑定问题

Question

我在网上看到了一些例子，并在SO上回答了一些问题，但不知何故，我的自定义指令没有得到双向绑定。

当我更改指令模板中的输入值时，ngModel不会更新控制器的作用域。

这就是我所拥有的：

控制器

$scope.tpcompl = "default value";
$scope.$watch('tpcompl', function(val) {
    alert('value changed!');
});

指令

.directive("panMdAutocomplete", function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=panModel',
            panLista: '=',
            panLabel: '=',
            panMaxlength: '=',
            panFlex: '='
        },
        templateUrl: 'template.html',
        link: function($scope, element, attrs){
            var sugereItem = function(termo) {
                var valor = termo.toUpperCase().trim();
                var resultados = [];
                for (var i=0;i<$scope.panLista.length;i++) {
                    var item = $scope.panLista[i];
                    if (item.id.toUpperCase().indexOf(valor) !== -1) {
                        resultados.push({label:item.id, value:item.id});
                    }
                }
                return resultados;
            }

            $scope.autocomplete_options = {
                    suggest: sugereItem
            };
        }
    }
});

模板

<span mass-autocomplete>
    <md-input-container ng-class="{'md-input-has-value': ngModel}" flex="{{panFlex}}" style="position:static;">
        <label>{{panLabel}}</label>
        <input type="text" ng-model="ngModel" ng-attr-maxlength="{{panMaxlength ? panMaxlength : ''}}" mass-autocomplete-item="autocomplete_options" class="md-input">
    </md-input-container>
</span>

最后是带有自定义指令的HTML

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'Complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl"></pan-md-autocomplete>

Answer 1

我认为问题出在控制器变量，一旦将控制器变量作为对象传递，而不是像这样直接传递变量，

  $scope.tpcompl = {
               value :"default value"
                    };

在HTML中使用：

<pan-md-autocomplete pan-lista="tiposcompl" pan-label="'Complemento'" pan-maxlength="'8'" pan-flex="'25'" pan-model="tpcompl.value"></pan-md-autocomplete>

希望这能行得通。