如何將控制器的範圍屬性傳遞給自定義指令？

我有了它內部的自定義指令（子元素）模式窗體。自定義指令是一個按鈕。該模式也由一個輸入複選框組成。

最終目標：

每當複選框被「託運」，自定義指令/按鈕元素應該被啓用。如果複選框爲「未選中」，則應禁用自定義指令/按鈕。

我有什麼到目前爲止AKA我的思維過程：

在「modalController」我把一個NG-模型上的複選框輸入動態地改變一個變量（器isChecked）的值。當檢查輸入時，它將$ scope.isChecked值設置爲true，當它未被選中時，$ scope.isChecked爲false。

爲了禁用按鈕，我會將'isChecked'的值從modalController傳遞到自定義指令，其值可以放置在指令模板內的按鈕上的ng檢查表達式中（參見下文）。

的問題

當我嘗試這個解決方案，控制檯日誌顯示一個錯誤，說「inputCheck沒有定義」。只要頁面加載，就會發生這種情況，所以控制檯日誌在用戶甚至可以單擊複選框之前打印出來。關於如何使這項工作的任何想法？

HTML模式：

<div ng-controller= "modalController"> 
    <input type="checkbox" ng-model="isChecked"> 
    <button-directive inputCheck="isChecked"></button-directive> 
    </div>

ButtonDirective.js：

angular.module('starter').directive('buttonDirective', function ($uibModal) { 
    return { 
     restrict: "EA", 
     templateUrl: "app/directives/button-directive.html", 
     scope: { 
      inputCheck: "@"  
     }, 
     controller: ['$scope', function ($scope) { 
        console.log(inputCheck); 
     }] 
    }; 
});

按鈕directive.html：

<button ng-checked="inputCheck">

來源

2017-06-19 Kode_12

$ scope.inputCheck是否工作？ – toddmo

不，它只是說它是undefined –

我可以理解爲什麼downvote？ –

工作你的方式。

你是路過屬性錯誤，angularjs有壞事IMO那就是當你將值傳遞給像inputCheck指令，你必須這樣它需要寫它hiphen不同input-check

<button-directive input-check="isChecked"></button-directive>

和你的範圍內聲明必須使用等號

scope: { 
    inputCheck: "="  
},

https://plnkr.co/edit/5jlHaE0fvhoDPi2h8XGq?p=preview

來源

2017-06-19 00:50:48

是的，這不起作用或者不幸 –

@ Kode_12你可以做一個jsfiddle嗎？或一個蹲跳者 –

我希望，我不能分享我的代碼，客戶端NDA的原因 –

你做錯了。 $ scope變量與該指令作用域聲明不同。

每個孩子，包括指令，都在$ scope範圍內，得到它？

因此，您的指令聲明不需要該範圍，請將其刪除。

angular.module('starter').directive('buttonDirective', function ($uibModal) { 
    return { 
     restrict: "EA", 
     templateUrl: "app/directives/button-directive.html" 
    }; 
});

而你的模態，不需要傳遞你的inputCheck屬性。

<div ng-controller= "modalController"> 
    <input type="checkbox" ng-model="isChecked"> 
    <button-directive></button-directive> 
    </div>

那麼你的指令HTML變得

<button ng-checked="isChecked">

看到這個

https://plnkr.co/edit/icaufi3LJxTnbTOkmxdb

來源

2017-06-19 00:39:34

感謝您的回覆。即使它是一個子元素，自定義指令自動成爲隔離範圍。我需要聲明'scope：true'嗎？ –

@ Kode_12不，你不知道。讓我們試着讓你的方式工作。我會給出另一個答案。 –

謝謝我欣賞它。 –

你應該做以下修改：

<button-directive input-check="isChecked"></button-directive> 

scope: { 
    inputCheck: "="  
} 

<button ng-disabled="inputCheck">

來源

2017-06-19 02:00:58

如何將控制器的範圍屬性傳遞給自定義指令？

回答

相關問題