AngularJS - Setting a variable on scope from directive
13,403
You are missing a call to $apply Just modify your code as below
scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this
// scope.setSelected(jQuery.parseJSON(attrs.select)); //Nor this is working
scope.$apply();
Comments
-
kmanzana almost 2 years
I'm trying to set a variable,
selected.child
, on the$scope
so that I can use it elsewhere. I'm still new to scopes in Angular, but not sure why I can't set something on the scope from within the directive. I can call scope functions.I have a JSfiddle for it and code is posted below.
Thanks for the help in advance.
The HTML:
<div ng-controller="DashCtrl"> <h3>{{selected.child}}<h3> <div ng-repeat="child in children" select={{child}}> {{child.username}} </div> </div>
The javascript:
var dash = angular.module('dash', []); dash.directive('select', function () { return { restrict: "A", scope: false, link: function (scope, element, attrs) { element.bind('click', function () { scope.selected.child = jQuery.parseJSON(attrs.select); //Neither this scope.setSelected(jQuery.parseJSON(attrs.select)); //Nor this is working if (attrs.select != scope.selected) { other_elements = angular.element(document.querySelectorAll('[select]')); for (var i = 0; i < other_elements.length; i++) { elm = jQuery(other_elements[i]); elm.css('background', 'none'); } element.css('background', '#F3E2A9'); } }); } }; }); dash.controller('DashCtrl', function ($scope) { $scope.setSelected = function (child) { $scope.selected.child = child; }; $scope.children = [{ "age_group": "6-8", "username": "my_child" }, { "age_group": "8-10", "username": "another_child" }]; $scope.selected = { child: "none" }; });