Question

我正在尝试为输入框构建一个自定义指令，其中input-model作为用作ng-model的属性。此输入模型属性与内部范围变量双向绑定。

templateUrl:'/components/directives/inputBox.html',
transclude:true,
restrict: 'A',
scope:{
  userInput : '=inputModel'
}

现在的问题是，在我明确提供输入模型的主html中，它运行正常。但是当我没有提供输入模型时，我想要一个后备，然后应该删除双向绑定。模板就像

<input id="searchinput" type="search"
               name="inputBox"
               class="form-control"
               placeholder="{{placeholder}}"
               ng-model="userInput"
               ng-pattern="pattern">

所以，当我没有在主html

中提供input-model属性时

<div input-box></div>

绑定按预期失败，给出错误：

Error: [$compile:nonassign] Expression 'undefined' used with directive 'inputBox' is non-assignable!

我想做一个后备以避免这种情况。我该怎么办？

Answer 1

此解决方案是否适合您？

Angular directive with default options

Answer 2

您可以在编译方法中检查已定义的属性，这将允许您在绑定发生之前处理该案例。

    return {
    template: '<div>{{userInput}} - test</div>',
    transclude: true,
    restrict: 'A',
    scope: {
        userInput: '=inputModel'
    },
    compile: function(element, attrs, transclude) {
        if (!attrs.inputModel) {
            attrs.inputModel = 'userInput';
        }
        return {
            pre: function(scope, element, attrs) {},
            post: function(scope, element, attrs) {}
        }
    }
};

<强> http://jsfiddle.net/anf4ryzL/

隔离AngularJS中的范围回退

2 个答案: