自定義指令顯示自己的錯誤

我有一個自定義指令，我想負責顯示自己的錯誤，並最終處理自己的驗證。但是，如果我在指令之外進行錯誤檢查，它似乎只能工作。有誰知道這是爲什麼？自定義指令顯示自己的錯誤

angular.module('App', []) 
.controller('Ctrl', function($scope) { 
    $scope.data = { 
     title: 'Lorem Ipsum' 
    }; 
}) 
.directive('customInput', function($compile){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: false, 
     scope: { 
     title: '=', 
     formName: '@' 
     }, 
     template: '<div><input name="custom" required ng-model="title"/>' + 
     '<span ng-show="{{formName}}.custom.$error.required">Required</span>' + 
     '</div>', 
     link: function(scope, element, attrs, ctrl) { 
     } 
    } 
    });

的指令模板內

http://jsfiddle.net/N7NDb/1/

來源

2014-07-21 nathasm

您的解決方案是不工作的原因叉是不應該在雙大括號，以及formName: '@'應該formName: '='。深入研究這是爲什麼，但這種解決方案應該可行。

的叉Fiddle

編輯： 之所以在這種情況下@Edminsson這個解決方案工作產生相同的結果：

之所以使用這種解決方案：
在你的指令創建一個具有「formName」屬性的獨立作用域，該屬性將被設置爲「form-name」屬性的值。 formName: '='通過由屬性「form-name」定義的名稱在父範圍上創建對該屬性的雙向綁定。因此，這允許您直接訪問父作用域上的屬性（在本例中爲'Ctrl'）及其所有可用屬性。這意味着父級作用域上屬性發生的任何更改都會反映在隔離範圍內。對於此解決方案，不需要需要大括號，因爲它不是Angular評估的表達式，您可以引用綁定到的對象上的所有屬性。

原因@Edminsson解決方案的工作
在隔離範圍，而不是使用formName: '=' @Edminsson仍保持着原始formName: '@'這意味着什麼被放置在窗體名稱屬性來自屬性「的形式，名稱的字符串」。這就是'@'符號返回的內容，不管字符串表示是在屬性中聲明的。完成此解決方案的下一部分是使用ng-form = {{formName}}，Angular將此識別爲表達式，並將其替換爲'formName'內部的值。這反過來在父級作用域上創建一個名爲'formName'的名稱的屬性。這個新的屬性可以被看作是一個「角度形式」，因此具有「角度形式」（即原始的，骯髒的，有效的）的所有屬性。在此Angular評估第二個實例後，所以當它最終寫入DOM時，Angular將評估線條
<span ng-show="myForm.custom.$error.required">Required</span>其中「myForm」是「Ctrl」範圍內的有效屬性。

Here是我將所有信息全部取消的來源。

由於問題中提出的模糊要求，這些方法都解決了這個問題，但隨着情況變得更加複雜，這些解決方案可以以不同的方式使用。

我希望這會有所幫助，並不是太複雜或顆粒狀，以免被欣賞。

來源

2014-07-21 20:50:41 user3862271

的FormController不表現一個可預期的方式。在這種情況下使用ng形式的幫助。

template: '<div ng-form="{{formName}}"><input name="custom" required ng-model="title"/>' + 
    '<span ng-show="{{formName}}.custom.$error.required">Required</span>' + 
    '</div>'

的Fiddle

來源

2014-07-21 20:40:53 Edminsson

自定義指令顯示自己的錯誤

回答

相關問題