從指令中的編譯函數訪問控制器

我已經搜遍遍了，唯一能想到的是我不明白關於編譯函數的基本工作原理。從指令中的編譯函數訪問控制器

這裏是我有什麼

angular.module("app", []) 
.directive("foo", function(){ 
    return { 
    scope: {}, 
    controller: function() { 
     this.someValue = 23; 
    }, 
    contollerAs: "ctrl", 
    compile: function(tElem, tAttrs) { 
     tElem.html("<h1>Data: {{ctrl.someValue}}</h1>"); 
    }, 
    template: '<h1>test</h1>' 
    } 
});

這顯示：數據：似乎並沒有看到「someValue中」變量。但是，當我使用範圍而不是控制器的語法，它的工作原理。

//this works fine 
angular.module("app", []) 
.directive("foo", function(){ 
    return { 
    scope: {}, 
    controller: function($scope) { 
     $scope.someValue = 23; 
    }, 
    contollerAs: "ctrl", 
    compile: function(tElem, tAttrs) { 
     tElem.html("<h1>Data: {{someValue}}</h1>"); 
    }, 
    template: '<h1>test</h1>' 
    } 
});

這顯示：數據：23

有我丟失的東西嗎？我甚至使用正確的編譯？手冊似乎不太有用。

來源

2017-01-18 MadOgre

由於存在拼寫錯誤。它是controllerAs，而不是contollerAs。

建議使用template function而不是compile。這使得將來更容易升級組件，同時也可以節省問題 - 如果沒有虛擬<h1>test</h1>模板，上述指令中的compile將無法正常工作。

來源

2017-01-18 07:46:02 estus

哇，完全尷尬。我不敢相信在盯着那段代碼看了兩個小時之後，我沒有看到它！你能否解釋一下，如果可能的話，編譯函數的目的是什麼？如果鏈接，控制器和模板處理所有事情，它會用到什麼。它有沒有用例？ – MadOgre

這是一個味道和實際問題。 'compile'的目的是修改模板並返回前鏈接和/或後鏈接功能。我相信它是在'template'函數之前出現的，並且因爲歷史原因而停留。通常使用'template'和'controller'和/或link函數（1.5+以上的$ onInit和$ postLink控制器鉤子）可以完成這項工作。 – estus

從指令中的編譯函數訪問控制器

回答

相關問題