填充内部指令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选项具有隔离范围

回答

相关问题