試圖在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指令。試圖雙向數據綁定

回答

相關問題