ngJsTree sample - checkbox plugin - get check item

<html>

  <head>
    <title>Test angularjs tree</title>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angularjs@1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
    <script data-require="jstree@*" data-semver="3.1.0" src="https://rawgit.com/vakata/jstree/master/dist/jstree.js"></script>
    <script data-require="ngJsTree@*" data-semver="0.0.4" src="https://rawgit.com/ezraroi/ngJsTree/master/ngJsTree.js"></script>    
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/vakata/jstree/master/dist/themes/default/style.min.css" />
  </head>

  <body>
      <div ng-app="app" ng-controller="jsTreeController">
        <div id="jsTree" js-tree="treeConfig" ng-model="model.jsTreeData" tree="treeInstance"></div>
        <br />
        <div>
          <button ng-click="updateCheckArray()">Update Checked Id</button>
          <br />
				
				checked id:
				{{checkArray}}
			</div>
      </div>
    
      <h1>Above will have problem to get the tree instance if it is in ng-include</h1>
      <p>The trick is to put treeInstance in a object so it can be pass in the ng-include scope</p>
      <a href="index2.html">fix demo</a>
      <script src="script.js"></script>
  </body>

</html>

var app = angular.module("app", ["ngJsTree"]);

app.controller("jsTreeController", function ($scope) {

	$scope.init = function () {
		$scope.model = $scope.model || {};
		$scope.model.jsTreeData = [
			{ "id": "ajson1", "parent": "#", "text": "Simple root node" },
			{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
			{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
			{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
		];
		
		$scope.treeConfig = {
			plugins:["checkbox"]
		};
		
		$scope.treeInstance = {};
		
		$scope.checkArray = [];
	}
	
	$scope.updateCheckArray = function(){
		$scope.checkArray = $scope.treeInstance.jstree(true).get_selected();
	}

	$scope.init();
})

# ngJsTree sample - checkbox plugin 取得勾選內容

這是一個範例，在angularjs專案使用
[ngJsTree](https://github.com/ezraroi/ngJsTree)
來使用[JsTree](https://www.jstree.com/)JQuery套件。

這個範例使用checkbox plugin並且demo如何在按下一個按鈕的時候取得jstree
所有勾選的節點Id。

# index2.html - demo 在ng-include情景使用

有朋友問到為什麼放在ng-include裡面`index.html`的`treeInstance`就取不到了？原因在於scope問題。
因此`index2.html` 模擬如何解決問題。

<html>

<head>
  <title>Test angularjs tree</title>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angularjs@1.3.6" data-semver="1.3.6" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.min.js"></script>
  <script data-require="jstree@*" data-semver="3.1.0" src="https://rawgit.com/vakata/jstree/master/dist/jstree.js"></script>
  <script data-require="ngJsTree@*" data-semver="0.0.4" src="https://rawgit.com/ezraroi/ngJsTree/master/ngJsTree.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/vakata/jstree/master/dist/themes/default/style.min.css" />
</head>

<body>
  <div ng-app="app" ng-controller="jsTreeController">

    <script type="text/ng-template" id="/tpl.html">
      <div id="jsTree" js-tree="treeConfig" ng-model="model.jsTreeData" tree="tree.treeInstance"></div>
    </script>

    <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Click me to show jsTree</a>
    <div id="tpl-content" ng-include src="currentTpl"></div>

    <br />
    <br />
    <div>
      <button ng-click="updateCheckArray()">Update Checked Id</button>
      <br /> checked id: {{checkArray}}
    </div>
  </div>

  <script src="script2.js"></script>
</body>

</html>

var app = angular.module("app", ["ngJsTree"]);

app.controller("jsTreeController", function ($scope) {

	$scope.init = function () {
		$scope.model = $scope.model || {};
		$scope.model.jsTreeData = [
			{ "id": "ajson1", "parent": "#", "text": "Simple root node" },
			{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
			{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
			{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
		];
		
		$scope.treeConfig = {
			plugins:["checkbox"]
		};
		
		$scope.tree = {};
		$scope.tree.treeInstance = {};
		
		$scope.checkArray = [];
	}
	
	$scope.updateCheckArray = function(){
		$scope.checkArray = $scope.tree.treeInstance.jstree(true).get_selected();
	}

	$scope.init();
})