2015-10-01 193 views
1

我正在通過Brad Dayley編寫的「學習Angular Js」一書。該書在其例子中使用$scope。我推動自己使用controllerAs。在第七章中,本書着重於創建自定義指令。通過控制器訪問父級控制器的數據

我創建了一個類似於提供的示例的簡單類。在裏面我設置transclude爲true。我正在使用鏈接功能來追加一個頁腳到父div。本頁的作者在頁腳標籤內部調用scope.$parent.title在該示例中,title值來自父控制器。

.directive('myBox', function() { 
     return { 
      transclude: true, 
      restrict: 'E', 
      scope: {title: '@', bwidth: '@bwidth'}, 
      template: "<div><span class='titleBar'>{{title}}"+ "</span> <div ng-transclude></div></div>", 
      link:function(scope, elem, attr, controller, transclude) { 
       console.log('scope', scope.$parent) 
       console.log('controller', controller); 
       elem.append('<span class="footer">'+ scope.$parent.title + '</span>'); 
       elem.css('border', '2px ridge black'); 
       elem.css('display', 'block'); 
       elem.css('width', scope.bwidth); 
      } 
     } 
    }) 

裏面的控制器使用$scope這本書,我想用controller as和正在使用vm等於這一點。這是我的控制器功能。 vm.title應該是頁腳上的值。

當我檢查值時,我從控制檯得到undefined

function FunCtrl() { 
    var vm = this; 

    vm.title = "myApplication"; 
} 

這裏是我試圖

http://plnkr.co/edit/uUeKrTwLOfkcGpkTU1Uz?p=preview

+0

你能提供一個完整的例子來展示你的問題嗎? – LionC

+0

這裏是一個基本的plunker http://plnkr.co/edit/uUeKrTwLOfkcGpkTU1Uz?p=preview – Winnemucca

回答

1
  • 一個plunker當您使用NG控制器語法,它只是調用諸如「啓動控制器的成員() 「在範圍內。

<input ng-click="start()" type="button" value="Button"/> 

  • 但是當你使用controllerAs語法中,控制器的一個實例被創建並分配給您所提供的參考變量 - 「樂趣」。所以無論你在控制器中定義了什麼,只能通過使用參考來訪問。 - 範圍內的「fun.start()」。

<input ng-click="fun.start()" type="button" value="Button"/> 

因此,你必須訪問父範圍成員時,如果已經使用controllerAs做同樣語法像下面所示

scope.$parent.fun.title 

Demo

注意 您在控制檯中輸出的控制器是屬於您尚未定義的指令的控制器。

+0

好的趕上。謝謝 – Winnemucca