Quel est le moyen le plus simple de passer d’une variable d’étendue AngularJS d’une directive à l’automate? Tous les exemples que j'ai vus semblent si complexes, n'y a-t-il pas moyen de pouvoir accéder à un contrôleur à partir d'une directive et de définir l'une de ses variables de portée?
Réponses
Trop de publicités?
Publié le 2014/8/25: Voici où je l'ai fourré.
Merci @Anvarik.
Voici le JSFiddle . J'ai oublié où j'ai fourré ça. Mais c’est un bon exemple qui montre la différence entre = et @
<div ng-controller="MyCtrl">
<h2>Parent Scope</h2>
<input ng-model="foo"> <i>// Update to see how parent scope interacts with component scope</i>
<br><br>
<!-- attribute-foo binds to a DOM attribute which is always
a string. That is why we are wrapping it in curly braces so
that it can be interpolated. -->
<my-component attribute-foo="{{foo}}" binding-foo="foo"
isolated-expression-foo="updateFoo(newFoo)" >
<h2>Attribute</h2>
<div>
<strong>get:</strong> {{isolatedAttributeFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedAttributeFoo">
<i>// This does not update the parent scope.</i>
</div>
<h2>Binding</h2>
<div>
<strong>get:</strong> {{isolatedBindingFoo}}
</div>
<div>
<strong>set:</strong> <input ng-model="isolatedBindingFoo">
<i>// This does update the parent scope.</i>
</div>
<h2>Expression</h2>
<div>
<input ng-model="isolatedFoo">
<button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
<i>// And this calls a function on the parent scope.</i>
</div>
</my-component>
</div>
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{
/* NOTE: Normally I would set my attributes and bindings
to be the same name but I wanted to delineate between
parent and isolated scope. */
isolatedAttributeFoo:'@attributeFoo',
isolatedBindingFoo:'=bindingFoo',
isolatedExpressionFoo:'&'
}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.foo = 'Hello!';
$scope.updateFoo = function (newFoo) {
$scope.foo = newFoo;
}
}]);
mlunoe
Points
1490
Attendez jusqu'à ce angulaire a évalué la variable
J'ai eu beaucoup de bidouiller avec cela, et je ne pouvais pas le faire fonctionner, même avec la variable définie avec "=" dans le champ d'application. Voici trois solutions en fonction de votre situation.
Solution #1
J'ai trouvé que la variable n'a pas été évaluée par angulaire encore quand il a été transmis à la directive. Cela signifie que vous pouvez y accéder et de l'utiliser dans le modèle, mais pas à l'intérieur du lien ou de l'application du contrôleur de fonction, sauf si nous attendre à être évalué.
Si votre variable est en train de changer, ou est récupérée à travers une demande, vous devez utiliser $observe ou $watch:
app.directive('yourDirective', function () {
return {
restrict: 'A',
// NB: no isolated scope!!
link: function (scope, element, attrs) {
// observe changes in attribute - could also be scope.$watch
attrs.$observe('yourDirective', function (value) {
if (value) {
console.log(value);
// pass value to app controller
scope.variable = value;
}
});
},
// the variable is available in directive controller,
// and can be fetched as done in link function
controller: ['$scope', '$element', '$attrs',
function ($scope, $element, $attrs) {
// observe changes in attribute - could also be scope.$watch
$attrs.$observe('yourDirective', function (value) {
if (value) {
console.log(value);
// pass value to app controller
$scope.variable = value;
}
});
}
]
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
// variable passed to app controller
$scope.$watch('variable', function (value) {
if (value) {
console.log(value);
}
});
}]);
Et voici le code html (n'oubliez pas les parenthèses!):
<div ng-controller="MyCtrl">
<div your-directive="{{ someObject.someVariable }}"></div>
<!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
<div ng-bind="variable"></div>
</div>
Notez que vous ne devez pas définir la variable "=" dans le champ, si vous utilisez l' $observe fonction. Aussi, j'ai trouvé qu'il passe par des objets comme des chaînes de caractères, donc si vous êtes de passage des objets d'utilisation de la solution #2 ou scope.$watch(attrs.yourDirective, fn) (ou #3 si votre variable est de ne pas changer).
Solution #2
Si votre variable est créée en, par exemple un autre contrôleur, mais faut juste attendre jusqu'à ce angulaire a évalué avant de l'envoyer au contrôleur app, on peut utiliser $timeout attendre jusqu'à ce que l' $apply a exécuter. Nous avons également besoin d'utiliser $emit de l'envoyer à la portée parent contrôleur app (du fait de l'isolement de la portée de la directive):
app.directive('yourDirective', ['$timeout', function ($timeout) {
return {
restrict: 'A',
// NB: isolated scope!!
scope: {
yourDirective: '='
},
link: function (scope, element, attrs) {
// wait until after $apply
$timeout(function(){
console.log(scope.yourDirective);
// use scope.$emit to pass it to controller
scope.$emit('notification', scope.yourDirective);
});
},
// the variable is available in directive controller,
// and can be fetched as done in link function
controller: [ '$scope', function ($scope) {
// wait until after $apply
$timeout(function(){
console.log($scope.yourDirective);
// use $scope.$emit to pass it to controller
$scope.$emit('notification', scope.yourDirective);
});
}]
};
}])
.controller('MyCtrl', ['$scope', function ($scope) {
// variable passed to app controller
$scope.$on('notification', function (evt, value) {
console.log(value);
$scope.variable = value;
});
}]);
Et voici le code html (pas de parenthèses!):
<div ng-controller="MyCtrl">
<div your-directive="someObject.someVariable"></div>
<!-- use ng-bind in stead of {{ }}, when you can to avoids FOUC -->
<div ng-bind="variable"></div>
</div>
Solution #3
Si votre variable est de ne pas changer et vous avez besoin de l'évaluer dans votre directive, vous pouvez utiliser l' $eval fonction de:
app.directive('yourDirective', function () {
return {
restrict: 'A',
// NB: no isolated scope!!
link: function (scope, element, attrs) {
// executes the expression on the current scope returning the result
// and adds it to the scope
scope.variable = scope.$eval(attrs.yourDirective);
console.log(scope.variable);
},
// the variable is available in directive controller,
// and can be fetched as done in link function
controller: ['$scope', '$element', '$attrs',
function ($scope, $element, $attrs) {
// executes the expression on the current scope returning the result
// and adds it to the scope
scope.variable = scope.$eval($attrs.yourDirective);
console.log($scope.variable);
}
]
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
// variable passed to app controller
$scope.$watch('variable', function (value) {
if (value) {
console.log(value);
}
});
}]);
Et voici le code html (n'oubliez pas les parenthèses!):
<div ng-controller="MyCtrl">
<div your-directive="{{ someObject.someVariable }}"></div>
<!-- use ng-bind instead of {{ }}, when you can to avoids FOUC -->
<div ng-bind="variable"></div>
</div>
Aussi, jetez un oeil à cette réponse: http://stackoverflow.com/a/12372494/1008519
De référence pour FOUC (flash de non stylé contenu) question: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED
Pour les intéressés: voici un article sur l'angle du cycle de vie
