AngularJS：將布爾值傳遞給指令

這裏是我的HMTL：

<city-zip city="clientCity" zip="clientZip" requiredParam="'true'"></city-zip>

和指導：

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=' 
     }, 
     controller: function($scope) {} 
    } 
});

任何幫助將非常感激。

來源

2015-06-22 be-codified

只要創建一個範圍變量來檢查這一點。 Theres不需要像串一樣傳遞。你應該通過作爲變量 – Fals

HTML

<city-zip city="clientCity" zip="clientZip" required-param="true"></city-zip> 
<city-zip city="clientCity" zip="clientZip" required-param="{{ someBooleanValue }}"></city-zip>

角

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=', 
      requiredParam:'@' 
     }, 
     link: function(scope) { 
      console.log("requiredParam", scope.requiredParam); 
     } 
    } 
})

來源

2015-06-22 16:59:23

對不起，這返回undefined。 –

現在檢查，編輯'required-param ='，'requiredParam =' –

我改變了這個。看看我對ng-required的底部評論？ –

裏面link，您可以訪問屬性：

return { 
    // code 
    link: link 
} 

function link(scope, $el, attrs) { 
    var requiredParam = attrs.requiredParam === 'true'; 
}

這會強制將字符串值一個布爾值（如果該字符串值是「真」，它會返回true，否則會返回false。）

這裏的主要部分是如何將字符串值「true」或「false」轉換爲它的布爾形式，因爲!!'true'和!!'false'都返回true。有關解決方案和擴展討論，請參閱this answer。

如果您需要使用控制器中的值，則可以在scope對象中執行相同的模式，並將其以強制形式傳遞給耦合控制器。

來源

2015-06-22 16:43:00

@JBNizet，是啊，我剛剛意識到，我改變了我的答案之前，你評論（現在說'var requiredParam == attrs.requiredParam ==='true''。 –

謝謝你的回答。我的指令不工作，可能是因爲鏈接和控制器在同一時間？你能指出我如何做到這一點在控制器？我甚至不知道爲什麼鏈接是。 –

@ZIGSON，我建議閱讀AngularJS文檔指令，它爲如何使用鏈接提供了很好的解釋。 –

有3個參數，你可以在鏈接功能，在指令工作過。參數是scope,element和attributes。

scope給出了指令所在控制器的範圍。
element傳遞關於在其上施加

屬性傳遞關於屬於元素的所有DOM元素的屬性的信息的DOM元素中的信息。

<city-zip ng-app="myapp" city="clientCity" zip="clientZip" required-param="true"></city-zip> 

angular.module("myapp", []).directive('cityZip', function() { 
return { 
    restrict: 'E', 
    templateUrl: '', 
    scope: { 
     requiredParam:'@' 
    }, 
    link: function(scope, $el, attrs) { 
     alert(attrs.requiredParam); 
    } 
}

}）

工作jsFiddle

來源

2015-06-23 08:46:04

謝謝你的努力。我確實得到真或假，但不知何故，我認爲這不是真正的布爾值。我在我的指令模板中使用了ng-required =「requiredParam」：儘管ng-required被設置爲true，但我得到了驗證錯誤。 –

這是工作，我忘記綁定requiredParam（把它們放在大括號內）。 –

我認爲最簡單的/清潔的答案還沒有被列入這個問題。這個答案也HTML5規範中適合的布爾屬性 - http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes

2.5.2布爾屬性

一些屬性是布爾屬性。在元素上存在布爾屬性代表真實值，並且缺少屬性代表的假值。

如果屬性存在，它的值必須是空字符串或者說是對屬性的規範名稱的ASCII 不區分大小寫的匹配，沒有前導或尾隨空白的值。

布爾屬性不允許使用值「true」和「false」。至代表一個錯誤值，必須完全忽略該屬性。

HTML：

<city-zip city="clientCity" zip="clientZip" requiredParam></city-zip>

而且指令：

.directive('cityZip', function() { 
    return { 
     restrict: 'E', 
     templateUrl: '../templates/templateCityZip.html', 
     scope: { 
      city: '=', 
      zip: '=' 
     }, 
     controller: function($scope, $attrs) { 
      $scope.requiredParamExists = $attrs.hasOwnProperty('requiredParam'); 
     } 
    } 
});

簡單，HTML5規範的布爾屬性，也沒有必要強迫一個字符串轉換爲範圍變量乾淨適合（'requiredParam': '=' ）。

請注意，在上面的示例代碼中，如果縮小，所需的變量$scope和$attrs將更改爲更短的字符串並破壞代碼，但這是另一個問題。

來源

2017-07-11 20:54:04 ryanm

此實現的一個大問題是，如果您想在自己的組件中使用具有此類屬性模板的組件，並且同時動態包含或不包含該屬性。例如，如果您想關閉或使用ui-select的「multiple」屬性動態地重複使用HTML元素並使用ng-if。基於這一點，我個人建議不要在這個答案中使用該模式。 – sean2078

@ sean2078我不太關注，因爲我從事這個問題已經有一段時間了。你能舉出一個問題的例子和/或你發現爲了後代更好地工作嗎？ – ryanm

AngularJS：將布爾值傳遞給指令

回答

相關問題