使用名稱屬性的動態指令控制器

Question

我正在嘗試使用動態控制器來實現指令，以便我可以根據某些條件綁定控制器，就像Todd Motto 在此處顯示的那樣

一切正常，希望我無法將對象屬性作為名稱發送給指令，例如，

<directive-with-dynamic-controller ctrl="someObj.prop"></directive-with-dynamic-controller>

我什至嘗試過，但無濟於事：

<directive-with-dynamic-controller ctrl="{{someObj.prop}}"></directive-with-dynamic-controller>

它給出了這樣的錯誤：

參數不是函數，未定義

有什么想法可以解決這個問題嗎？ 還是其他方式？ 謝謝！

Answer 1

有什么想法可以解決這個問題嗎？ 還是其他方式？ 謝謝！

問題出在執行順序上。 提到的文章中遺漏的一個事實是，在設置“動態”控制器的情況下，您無法傳遞表達式（對於動態而言，就這么多）。

如果我們看一下指令編譯步驟的符號，您會注意到無法訪問當前的$scope 。

這是因為DOM編譯和控制器初始化發生在角度解析器啟動並評估表達式之前。

因此，您不能將$ scope表達式傳遞給ctrl屬性，因為此時它只是常規的DOM屬性。 本質上，您是將原始字符串傳遞到ctrl屬性中。

<my-custom-dir ctrl="foo.bar"></my-custom-dir>

// Error: "foo.bar" is not a controller // is not a function // $minErrObscureStuffThatDoesnHelpYou.

我一直在試圖找到一種巧妙的方法來使延遲指令編譯現在運行一段時間，但無濟於事...

解決這個問題的一種可能方法 （ ymmv ）：

.directive('...', function ($controller) {
  controller: function ($scope, $element, $attrs) {
    $attrs.$observe('ctrl', function (n, o) {
      return $controller(n, {
        $scope:   $scope,
        $element: $element,
        $attrs:   $attrs
      });
    });
  }
});

有效地，您可以將一個預初始化的控制器（不執行任何操作）替換為與您通過attrs.ctrl屬性傳遞的名稱匹配的控制器。 但是，這將執行編譯后的操作-因此，我不推薦這樣做。

jsfiddle顯示執行順序

tl; dr當前沒有基於$ scope表達式為指令定義控制器的巧妙方法。 它必須是原始字符串，因為編譯不是基於每個組件的范圍，而是按“全局”執行順序。

DOM編譯>控制器初始化>范圍鏈接小提琴