angularjs - switch - ¿Cómo establecer un valor predeterminado en un Ámbito de la Directiva Angular?
ng-value (5)
Creo que puedes hacer algo como esto:
scope : true,
link : function(scope, element, attrs){
scope.allowSomething = $parse(attrs.allowSomething)(scope) || true;
console.log(scope)
}
En Angular, tengo la siguiente situación en la que una directiva puede aceptar un parámetro booleano opcional que debe ser por defecto predeterminado, siempre que no esté especificado .
Ejemplo:
<my-directive data-allow-something="false">
... this works as expected as no default value should be set in this case ...
</my-directive>
<my-directive>
... but in this case i''d like allowSomething to equal true ...
</my-directive>
He intentado el siguiente enfoque, pero por alguna razón, el verdadero valor no se adhiere a allowSomething . convirtiéndolo en un ''=?'' el enlace bidireccional opcional tampoco funciona, ya que mi valor pasado debe ser un verdadero verdadero / falso y no una referencia de campo.
angular.module(''myApp'').directive(''myDirective'') {
...
controller: function($scope){
if (!$scope.allowSomething)
$scope.allowSomething = true;
},
....
scope: function(){
allowSomething: ''@''
}
...
}
Estoy seguro de que debería haber una manera simple de lograr esto, entonces ¿qué me estoy perdiendo?
Las soluciones dadas en el siguiente ticket: directiva angular con opciones predeterminadas no son suficientes para mis necesidades ya que la función $ compile evitará que la función de enlace funcione. Además, el valor booleano pasado no es un tipo de referencia y no puedo darle un enlace bidireccional.
Dado que tu plantilla es
<body>
<my-directive></my-directive>
<!-- <my-directive allow-something="false"></my-directive> -->
</body>
Luego puede usar el link (preferido si no se necesita interacción con otras directivas) o el controller .
angular.module(''myApp'', [])
.directive(''myDirective'', function() {
return {
scope: {},
link: function(scope, element, attrs) {
scope.allowSomething = (''allowSomething'' in attrs) ? attrs.allowSomething : true;
},
template: ''<div>allow:{{ allowSomething }}</div>''
};
});
// o
angular.module(''myApp'', [])
.directive(''myDirective'', function() {
return {
scope: {
allowSomething: ''@''
},
controller: function($scope, $timeout) {
$timeout(function() {
if (angular.isUndefined($scope.allowSomething)) {
$scope.allowSomething = true;
}
});
},
template: ''<div>allow:{{ allowSomething }}</div>''
};
});
Creo que una mejor manera de verificar ese valor es buscar un valor indefinido como este:
controller: function($scope){
if (angular.isUndefined($scope.allowSomething))
$scope.allowSomething = true;
}
Tuve el mismo problema una vez y esto funcionó para mí. Creo que el mejor método es usar los métodos de angular para manejar cosas.
Así es como lo he estado haciendo:
html:
<my-directive allow-something="false"></my-directive>
<my-directive></my-directive>
directiva:
angular
.module(''app'')
.directive(''myDirective'', function() {
var defaults = {
allowSomething: true
};
return {
restrict: ''E'',
templateUrl: '''',
scope: {},
compile: function() {
return {
pre: function(scope, el, attrs) {
scope.allowSomething = attrs.allowSomething || defaults.allowSomething;
},
post: function(scope, el) {
// this is link
// scope.allowSomething = default or whatever you enter as the attribute "false"
}
};
}
};
}
El pre se dispara antes de que ocurra algo, luego la publicación es como la función de enlace. Esto me ha permitido hacer cosas dinámicas basadas en los atributos que establecí.
Truco de Javascript: en tu plantilla simplemente usa el || operador:
<div class="{{outerDivClass||''form-group''}}">
(outerDivClass es una variable de ámbito ''@''. Si es nula / indefinida, se está utilizando ''form-group'').