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

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

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="HEAD.xslt"/>
<xsl:include href="FOOT.xslt"/>

<xsl:template match="/">
    <html lang="en-GB">
        <body style="font-family:'Praxis Com Light'; color:#632423; width:100%; font-size:14px !important;">

        <xsl:call-template name="Header"/>

//MAIN BODY OF CODE

            <xsl:call-template name="Footer"/>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

并在HTML中使用：

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

希望这会奏效。

角度自定义指令双向绑定问题

1 个答案: