javascript
  • angularjs
    • 2014-01-13 62 views 2 likes 
    2

    我对角建立一个TreeView两个嵌套的指令：呼叫功能

    家长指令：

    myApp.directive('nodes', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      nodes: '=' 
     }, 
     template: "<ul><node ng-repeat='node in nodes' node='node'></node></ul>" 

    } 
});

    儿童指令：

    myApp.directive('node', function($compile) { 
     return { 
      restrict: "E", 
      replace: true, 
      scope: { 
       node: '=' 
      }, 
      template: "<li>{{node.ObjectName}}</li>", 
      link: function(scope, element, attrs) { 
       if (angular.isArray(scope.node.Children)) { 

        element.append("<nodes nodes='node.Children'></nodes>"); 

        $compile('<nodes nodes="node.Children"></nodes>')(scope, function(cloned, scope) { 

         element.append(cloned); 
        }); 
       } 
      } 
     } 
    });

    控制器：

    function myController($scope, DataService) { 
     $scope.init = function() { 

      DataService.getData(0, 0).then(function(data) { 
       $scope.treeNodes = $.parseJSON(data.d); 
      }); 
     } 

     $scope.focusNode = function(prmNode) { 
      console.log(prmNode); 
     } 

    }

    HTML：

    <div ng-app="testTree" ng-controller="myController"> 
     <div ng-init="init()"> 
      <nodes nodes='treeNodes'></nodes> 
     </div> 
    </div>

    我的问题是我怎么能实现对<li>这将调用控制器中的 “focusNode” 功能点击？

    来源

    2014-01-13 ronen

    +0

    你能发布html部分吗？ –

    +0

    @MaximShoustin，我添加了我的HTML部分。 – ronen

    回答

    1

    您可以通过属性传递函数。

    的Javascript

    var myApp = angular.module('myApp', []); 

myApp.directive('nodes', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      nodes: '=', 
      clickFn: '&' 
     }, 
     template: "<ul><node ng-repeat='node in nodes' node='node' click-fn='clickFn()'></node></ul>" 
    } 
}); 


myApp.directive('node', function($compile) { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: { 
      node: '=', 
      clickFn: '&' 
     }, 
     template: "<li><span ng-click='clickFn()(node)'>{{node.ObjectName}}</span></li>", 
     link: function(scope, element, attrs) { 
      if (angular.isArray(scope.node.Children)) { 

       element.append("<nodes nodes='node.Children' click-fn='clickFn()'></nodes>"); 

       $compile('<nodes nodes="node.Children" click-fn="clickFn()"></nodes>')(scope, function(cloned, scope) { 

        element.append(cloned); 
       }); 
      } 
     } 
    } 
}); 

function myController($scope) { 
    $scope.focusNode = function(prmNode) { 
     console.log(prmNode); 
    } 

    $scope.root = { 
    ObjectName: 'Root', 
    Children:[{ 
     ObjectName: 'A', 
     Children: [{ 
     ObjectName: 'B' 
     }, { 
     ObjectName: 'C' 
     }] 
    }] 
    }; 
}

    HTML

    <!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app='myApp' ng-controller="myController"> 
    <node node="root" click-fn="focusNode"></node> 
    </body> 

</html>

    来源

    2014-01-13 10:20:55

    +0

    我收到一个错误：“对象＃在''上没有方法'。错误来自这一行：'' – ronen

    +0

    这个plunkr是否适合你？ http://plnkr.co/edit/XvqTfoullnXDVWRqFIyw?p=preview –

    +0

    它不显示错误，但是当我点击跨度时它不写入控制台。 – ronen

    1

    因为我不能发表评论，直到我50代表CRED：（...

    我只是想补充我在尝试使用WLJared在上面分享的plunkr时也遇到错误，为了解决这个错误，我改变了控制从全球功能到：

    angular.module('myApp').controller('myController', function($scope){...})

    错误消失了。

    虽然很好的答案:)正是我在找什么。

    来源

    2014-01-19 23:59:45 coblr

    +0

    你现在有78 :) –

    相关问题

     相关问题