试图在ES6中创建一个angularJS指令。试图双向数据绑定

我收到错误消息时错误：试图在ES6中创建一个angularJS指令。试图双向数据绑定

Expression 'undefined' in attribute 'myVar' used with directive 'myDirective' is non-assignable

试图建立一个双向数据绑定时。我不明白为什么。

我试图做的是将我的指令中的复选框的值绑定到其他地方的控制器中的值。

我在ES6中使用angularJS 1.5.7。

下面是相关代码：

我的指令及其控制器

export default class myDirective { 
    constructor() { 
     this.template = require('./template.html); 
     this.restrict = 'E'; 

     this.scope = {}; 
     this.bindToController = { 
      districts: '<', 
      myVar: '=' 
     }; 

     this.controller = MyController; 
     this.controllerAs = 'ctrl'; 
    } 
} 

class MyController { 

    constructor() { 
     this.simulateQuery = false; 
     this.selected = ''; 
     this.searchText = ''; 
    } 

    checkMyVar(){ 
     if(this.myVar){ 
      this.selected = null; 
      this.searchText = ''; 
     } 
    } 

    querySearch(query){ 
     var result = query; 
     ? this.districts.filter(this.createFilterForQuery(query)) 
     : this.districts; 

     return results; 
    } 

    createFilterForQuery(query){ 
     var lowercaseQuery = angular.lowercase(query); 

     return function filterFn(district){ 
      return (district.value.indexOf(lowercaseQuery) !== -1); 
     } 
    } 
}

template.html

<div flex=30> 
    <md-checkbox class="blue" ng-model="ctrl.myVar" ng-change="ctrl.checkMyVar()">myVar</md-checkbox> 
</div>

该指令的用法

<my-directive myVar="ctrl.myVar"></my-directive>

myVar的这里在这个构造函数中声明模板控制器：

this.myVar = false;

来源

2017-03-06 mTv

我想你应该通过价值这样

<my-directive my-var="ctrl.myVar"></my-directive>

使用my-var而不是myVar

来源

2017-03-08 08:45:10

谢谢。这是正确的。 – mTv

从AngularDoc

当指令定义的分离物范围属性（使用=发生此错误模式在指令定义的范围选项中），但是该指令与不可分配的表达式一起使用。

解决的办法是充分利用结合可选

this.bindToController = { 
    myVar: '=?' 
};

来源

2017-03-06 13:41:48 digit

是的，我已经看到并试用了此。看起来像这样会使错误消息消失，但也是数据绑定。作为它的可选项，我假设它不会将数据值绑定在一起，如果其中一个是不可分配的。 – mTv

Expression 'undefined' in attribute used with directive is non-assignable

这听起来像有可能是你如何分配/引用顶级ctrl.myVar变量你是一个问题作为属性传入指令。它应该作为false传入，但它被接收为undefined

很难完全没有看到完整的模板控制器代码就说完全。可能是一个简单的错字或分配给功能的this而不是控制器的this。如果您不介意分享您的完整控制器代码，我会根据需要更新我的答案。

编辑：

好吧，我继续在codepen here使这个。我认为这是你想要的;希望这可以帮助你修复你的代码。看起来你正在使用角度材质，它应该和我在笔中使用的标准输入元素一样工作。虽然我对ES6并不是很熟悉，所以我用ES5编写。

希望有帮助！

来源

2017-03-06 14:02:26 morgan

是的我假设我在MyController中引用myVar的地方有些问题，我使用了这个指令。控制器中确实没有太多有趣的东西。其他功能用于搜索查询。 myVar在这些函数中没有任何参考。奇怪的是，控制器能够建立'>'（单向绑定）。 '@'（DOM绑定）不会给出任何错误，但不会做任何事情，如预期的那样。我会尽快用所有代码更新我的答案。我真的不知道我所遗漏的部分会如何影响任何东西。但是，再次，我不是angularJS专家。 – mTv

@mTv我编辑了我的回复。请让我知道，如果这可以帮助你。 – morgan

重写它更像es6一样（http://codepen.io/anon/pen/XMNWoo）。它仍然有效。所以我真的不知道为什么它在我的项目中不起作用。其他地方有某种神秘的东西让它无法工作。如果我弄清楚它是什么，我会让你知道的。 – mTv

试图在ES6中创建一个angularJS指令。试图双向数据绑定

回答

相关问题