2016-03-15 103 views
3

我有一個指令(顯示YouTube視頻),它應該把一個函數作爲一個屬性,以便能夠在鏈接函數中啓動它。將一個函數傳遞給一個指令,然後用參數調用它

我(玉)

div(ng-controller="videoPageCtrl") 
    ... 
    div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange") 

我的控制和指導的樣子寫的HTML中如下

app 
.directive('myYoutube', function($sce, $timeout) { 
    return { 
     restrict: 'A', 
     scope: { 
      url: '@', 
      id: '@', 
      onChange: '&', 
     }, 
     link: function(scope) { 
      $timeout(function() { 
       scope.player = new YT.Player(scope.id, { 
        videoId: scope.url, 
        events: { 
         'onStateChange': function(state) { 
          console.log('state changed to', state, scope.id, scope.onChange); 
          scope.onChange(state, scope.id); 
         } 
        } 
       }); 
      }, 5000); 
     } 
    }; 
}) 
.controller('videoPageCtrl', ['$scope', '$http', '$sce', function($scope, $http, $sce) { 
    $scope.doEventsOnChange = function(state, id) { 
     console.log(id, state, 'launched from controller!'); 
    }; 
}]); 

的問題是,我無法通過idstate和火起來的doEventsOnChange功能。 結果在chrome dev控制檯中,我只能看到state changed to行,但沒有launched from controller!行通過idstate

我在做什麼錯?

回答

1

如果您只想將函數傳遞給指令的作用域,那麼當您要在指令的模板中使用該函數時,應該使用onChange: '&';如果您只想將該函數傳遞給指令的作用域,請使用onChange: '='

&綁定允許指令在特定時間在原始範圍的上下文中觸發對錶達式的評估。任何法律表達都是允許的,包括一個包含函數調用的表達式。因此,&綁定非常適合將綁定回調函數綁定到指令行爲。

+0

因此,如果我的指令中有模板,我應該使用'&'? – kaytrance

+0

如果您的指令中有一個模板,並且您想從中調用該模板,那麼可以在這裏指出一個ng-click,是的。如果您只是想在指令的控制器中使用它,請使用'=' –

+0

@MartijnWelker ..通過爲指令創建一個隔離範圍,範圍不一樣。所以指令和控制器沒有使用相同的範圍。通過使用「=」,您只需將父作用域的函數(模型)綁定到子作用域的模型:)。它當然會起作用,但我認爲並且會更合適。這是因爲對於永遠不會改變的函數(在控制器或指令中)的兩種方式綁定不是很合適。使用和引用該函數是一個更好的選擇。 – AhsanAyaz

0

爲了實現自己的目標,你必須傳遞參數時,用這句話在HTML

div(my-youtube,id='aaa',url='KEHxHr-Ih9w',on-change="doEventsOnChange(state,id)") 

,並在你的指令,:

console.log('state changed to', state, scope.id, scope.onChange); 
scope.onChange({state: state,id:scope.id}); 

查看enter link description here

文檔

&或& attr - 提供了一種在父範圍的上下文中執行表達式的方法。如果未指定attr名稱,則假定屬性名稱與本地名稱相同。鑑於以及隔離範圍定義範圍{localFn:'& myAttr'},隔離範圍屬性localFn將指向count = count + value表達式的函數包裝。通常希望通過表達式將數據從隔離範圍傳遞到父範圍。這可以通過將局部變量名稱和值的映射傳遞到表達式包裝函數fn來完成。例如,如果表達式是增量(金額),那麼我們可以通過調用localFn作爲localFn({amount:22})來指定金額值。

希望這會有所幫助。

相關問題