在 AngularJS 中隔离作用域回退

Posted 2023-03-15

【中文标题】在 AngularJS 中隔离作用域回退

【英文标题】：Isolate scope fallback in AngularJS

【发布时间】：2015-02-17 03:07:39

【问题描述】：

我正在尝试为输入框构建一个自定义指令，它具有 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!

我想回退以避免这种情况。我应该如何进行？

【参考方案1】：

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

    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/

【讨论】：

谢谢！但是有一个问题，如果我使用编译，那么我不能使用链接？那么在哪里注入链接功能呢？在帖子块中？

Compile 返回两个方法，一个 pre-link 和 post-link 这些是你的链接函数。默认情况下，在 compile 外部使用的链接方法与 post 方法相同，因此您可以像使用链接一样使用 post: function()

好的。那么如果我可以在编译本身中处理预绑定逻辑，那么何时使用 pre: function() 块？

编译的工作方式分 3 步，首先 angular 运行一个指令编译函数，然后运行它自己的编译函数来设置你的隔离范围（这就是我们在编译函数中设置属性的原因首先），然后它将范围、元素和属性传递给预链接方法，并按父>子的顺序运行这些方法，然后以相反的子>父的顺序运行后链接方法。这意味着您可以 A. 在 Angular 使您的范围（编译）之前做一些事情，B. 在所有子指令链接运行之前做一些事情（预链接），C. 在子指令链接之后做一些事情（链接后）

compile 和 pre-link/post-link 的区别在于 compile 还没有作用域，你的指令的隔离作用域是在 compile 和 link 之间创建的

【参考方案2】：

此解决方案对您有用吗？

Angular directive with default options