選択プットの角度HTMLリストアプリ広い変数に選択した値とスパン

Question

に私は、私はそれを表示するために<span>に選択した値を入れたいと思い、次のコード

<ul id = "vers"> <span>My App</span> 
    <li class="sub"> 
     <a href="#">Version</a> 
     <ul> 
      <li class="sub"> 
       <a href="#">V2</a> 
       <ul ng-controller="V2Ctrl"> 
        <li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</a></li> 
       </ul> 
      </li> 
      <li class="sub"> 
       <a href="#">V3</a> 
       <ul ng-controller="V3Ctrl"> 
        <li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

を持っているSPAを持っていますこの値を他のものの入力として使用できるように、アプリケーション全体の変数に値を格納します。

AngualrJでどうすればいいですか？

更新：

私は、次のような効果を探しています：

var vers = ""; 
var link = document.getElementById("vers"); 
AttachEvent(link, "click", EventHandler); 

function AttachEvent(element, type, handler) { 
    if (element.addEventListener) element.addEventListener(type, handler, false); 
    else element.attachEvent("on"+type, handler); 
} 

function EventHandler(e) { 
    alert(e.target.innerHTML); 
    vers = e.target.innerHTML; 
} 

上記のコードは、実際にトップレベルのリスト上のコントローラなしで動作します。 これにはコントローラが必要ですか？はいの場合、コントローラーはいつ呼び出されますか？

私の質問をより明確にすることを望みます。

Answer 1

これはあなたが探しているものですか？

HTML

<ul ng-app="app" ng-controller="appController"> <span>{{value}}</span> 
<li class="sub"> 
    <a href="#">Version</a> 
    <ul> 
     <li class="sub"> 
      <a href="#">V2</a> 
      <ul> 
       <li ng-repeat = "v2 in fruits"><a href="javascript:void(0)" ng-click="select(v2)">{{v2}}</a></li> 
      </ul> 
     </li> 
     <li class="sub"> 
      <a href="#">V3</a> 
      <ul> 
       <li ng-repeat = "v3 in countries"><a href="javascript:void(0)" ng-click="select(v3)">{{v3}}</a></li> 
      </ul> 
     </li> 
    </ul> 
</li></ul> 

JS

var App = angular.module('app', []); 
App.controller('appController', function($scope, fruits, countries){ 
$scope.value=""; 
$scope.v2 = 'Apple' 
$scope.v3 = 'Windows' 
$scope.fruits = fruits; 
$scope.countries = countries; 

$scope.select = function(val){ 
    $scope.value = val; 
} 
}); 
App.factory('fruits', function(){ 
    return ['apple', 'banana', 'mango'] 
}); 
App.factory('countries', function(){ 
    return ['Dominican Republic', 'Panama', 'Argentina'] 
}); 

Check this example working here...

Answer 2

異なる角度コントローラ間の通信は常に大きなテーマです。 私は同様の問題を持っていたし、基本的に2つのオプションがあります。

• （！それを使用しないでください）$のrootscope を使用
• は、作成原則のDataService

を使用グローバルな情報格納するためのサービス：

angular.module('DataService', []) 

    .service('DataService', function() { 
     var service = {}; 
     service.topValue = "1 (default)"; 
     service.middleValue = "2 (default)"; 
     service.bottomValue; 

     return service; 
    }) 

を私はそれがどのように機能するかを示すために、小規模なプロジェクトを作った： https://github.com/leader80/angularjs-dataservice

、その後、あなたはちょうどあなたが必要な場所のDataServiceを注入し、特定のコントローラとそれを使用することができます。

ctrl.DataService.topValue 

自動的にあなたがそれを変更すると、それが世界的に更新されます。

私はそれが役に立ちそうです。