填充內部指令NG選項具有隔離範圍

選擇我想不通爲什麼NG選項指令不存在於我的工作，例如：填充內部指令NG選項具有隔離範圍

http://plnkr.co/edit/wwAIDHl6U7YaScRzIKAY

app.coffee

app = angular.module('plunker', []) 

app.controller 'MainCtrl', ($scope) -> 
    $scope.query = {} 
    $scope.types = ["Test", "Demo", "Numeric", "ABC"] 
    $scope.items = [{typ: "Test"},{typ: "Test"},{typ: "Demo"}, {typ: "Numeric"}] 

app.directive 'colFilterable', ($parse) -> 
    { 
    restrict: 'A', 
    scope: { 
     colFilterable: '=', 
     filterableKey: '@', 
     filterableOptions: '=' 
     filterableOptionsArg: '@', 
    }, 
    compile: (el, $scope) -> 
     if $scope.filterableKey 
     key = $scope.filterableKey 
     else 
     key = el.text().toLowerCase() 

     options = 'label for value in filterableOptions' 
     if $scope.filterableOptionsArg 
     options = $scope.filterableOptionsArg 

     el.append('<select class="col-filterable" ng-model="filter" ng-options="' + options + '"><option></option></select>') 

     return ($scope, el, attrs) -> 
     $scope.$watch 'filter',() -> 
      $scope.colFilterable[key] = $scope.filter 
    }

的index.html

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <h2>DEMO</h2> 
    <table> 
     <thead> 
     <tr> 
      <th col-filterable="query" filterable-options="types"> 
      Typ 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="item in items | filter: query"> 
      <td>{{item.typ}} 
     </tr> 
     </tbody> 
    </table> 

    <h2>DEBUG</h2> 
    <p>{{ types }}</p> 
    <p>{{ query }}</p> 
    </body> 

</html>

我追加選擇與NG選項（可以傳入，但默認爲label for value in filterableOptions）並返回鏈接函數，該函數監視ng模型並將數據綁定的$scope.colFilterable設置爲值$scope.filter

我無法使用模板因爲我想保留什麼是目前的元素裏面，只是想追加該選擇這反過來應該過濾結果表

編輯：

還好，似乎$scope.$watch 'filter'是行不通的任何一種方式和結果不會傳播到父範圍，所以我重寫它以使用更改事件 http://plnkr.co/edit/qzaf1sBoFuVD8fow0tfA

el.find('select').bind 'change', (event) -> 
    $scope.colFilterable[key] = this.value 
    $scope.$apply()

這個作品，如果我手動編寫option元素

來源

2014-09-30 Rouven Hurling

沒關係，我理解了它通過使用模板和鏈接功能，而不是編譯功能。這是我的解決方案現在

app.directive 'colFilterable', ($parse) -> 
    { 
    restrict: 'A', 
    scope: { 
     colFilterable: '=', 
     filterableKey: '@', 
     filterableOptions: '=' 
     filterableOptionsArg: '@', 
    }, 
    template: (el, attr) -> 
     options = 'value as value for value in filterableOptions' 
     if attr.filterableOptionsArg 
     options = attr.filterableOptionsArg 

     return el.html() + '<select class="col-filterable" ng-model="filter" ng-options="' + options + '"><option value="">Alle</option></select>' 

    link: ($scope, el, attr) -> 
     if attr.filterableKey 
     key = attr.filterableKey 
     else 
     key = el.text().toLowerCase().trim() 

     el.find('select').bind 'change', (event) -> 
     if $scope.filter 
      $scope.colFilterable[key] = $scope.filter 
     else 
      delete $scope.colFilterable[key] 
     $scope.$apply() 
    }

http://plnkr.co/edit/50shUSLVTI0NLjqMJv4h

來源

2014-09-30 14:27:55

填充內部指令NG選項具有隔離範圍

回答

相關問題