I'm new to AngularJs and I've encountered a problem that might be due to my lack of understanding about directives, controllers, and isolated scopes. I'm trying to figure out how to set a directive attribute to true/false in the html and keep a controller property consistent with that attribute. Here's what I have:
- A controller (
LoginController) with the propertysignUpEnabled A directive (
myLogin) that looks like this:var directive = { bindToController: true, controller: 'LoginController', controllerAs: 'loginVm', templateUrl: 'login/my-login.directive.html', restrict: 'E', scope: { signUpEnabled: '=' } };The HTML where the directive is used:
<my-login sign-up-enabled="true">
When I try this, I receive the error:
Error: [$compile:nonassign] Expression 'true' used with directive 'frintLogin' is non-assignable!If I set signUpEnabled to false in the HTML, it works fine - possibly because that's the initial value in the controller. Am I approaching this incorrectly, or did I overlook something (like watching signUpEnabled in the directive's link function)?
[edit] Thank you for your assistance. Although I'm not sure if this is the best approach, I believe I can achieve the desired behavior by adding this link function to the directive (after changing the binding of signUpEnabled on the isolate scope to '@'):
function link(scope, element, attrs, ctrl) {
$timeout(function() {
ctrl.signUpEnabled = scope.$eval(attrs.signUpEnabled)
}); ;
}