帶有ngModel的角度遞歸指令

Question

我最近學到了很多關於遞歸指令的知識，但還有一些我還沒有得到的東西。

這篇文章特別解決了我的大部分問題： Angular指令中的遞歸 （謝謝!!）

我已經設法建立一個基於這種技術的遞歸規則編輯器指令，它可以完成我想要的大部分工作。 它成功編輯了一個復雜的JSON結構，該結構描述了處理消息的規則，允許您添加和刪除層次結構級別和編輯值。

該指令旨在簡潔地實例化如下：

<rule-element rule="<scope variable>"></rule-element>

理想情況下，我希望此指令表現為表單的一部分，並提供驗證信號，我讀到的所有內容都告訴我需要使用ngModel進行綁定。 但是，該示例以及我的代碼不使用ngModel，而是選擇使用屬性和本地隔離范圍。

我已經讀過使用帶有隔離范圍的ngModel很棘手（ 孤立的范圍缺陷與ng模型依賴關系 ），並且使用ngModel來到這里的whack-a-mole路徑並不是很成功，所以我最終只使用了bi-對屬性的方向綁定。

添加此元素所需的鈎子以報告其所包含的表單的最佳方法是什么，因此我可以使用角度驗證來顯示消息並啟用/禁用提交按鈕？

我確信我能以某種方式破解這個，但我這樣做的主要動機是學習正確的方法，所以，呃，我在這里。

這是我正在進行的工作指令的一部分： http ://plnkr.co/edit/02b9zTS1O81wgVapn3eg?p=preview

有什么建議？

Answer 1

我也有復雜的驗證要求。 在我的例子中，我從服務器獲得一個包含相關輸入字段的錯誤消息的json。 它只依賴於字段名稱（也是數組和使用ng-repeat的嵌套，如attr [34] .part。這就是我為有效標識符替換括號和點的原因）。

在這種情況下，我有一個范圍對象包含所有屬性的錯誤消息（我有另一個函數手動重置有效性，因為它會在另一個提交后仍然存在）。

我不知道這對你有用，但它可能會給你一個想法。

$scope.setValidationErrors = function ( error ) {

    $scope.myForm.$setValidity( "validation", false );
    if ( error.data ) {
        // Add error messages
        for ( var err in error.data ) {
            var sanitizedErr = err.replace( /[.\[\]]/g, '-' );
            if ( error.data.hasOwnProperty( err ) && $scope.showProviderForm[sanitizedErr] ) {
                $scope.myForm[sanitizedErr].$setValidity( "validation", false );
                $scope.myForm[sanitizedErr].$setPristine();
            }
        }
        $scope.errors = error.data;
    }
};

Answer 2

這是一個半答案。

我希望這個元素能夠自我驗證，但我無法想出一種方法可以將表單附加到它上，而不會使表單成為遞歸的一部分並創建我不准備解決的新問題。

所以我最終建立了一個驗證指令，可以附加到元素來訪問模型：

app.directive('ruleValid', function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, element, attrs, ngModel) {

            scope.$watch(attrs.ngModel, function(thing) {
                ngModel.$setValidity(attrs.ngModel, validate(thing));
            }, true);

        }
    };
});

我不喜歡的是它有自己的遞歸來驗證整個樹（參見plunkr的validate（）函數）似乎有一個更好的解決方案，元素本身報告驗證，因為它recurses。

所以，這有效，但並不像我希望的那樣優雅。

這是更新的plunkr： http ：//plnkr.co/edit/7I0fBZnTEU8Ss0ZYphsB？p = preview