Skip to content

Instantly share code, notes, and snippets.

@abrjagad
Last active November 16, 2015 15:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save abrjagad/bfa7b16c04deeab78bda to your computer and use it in GitHub Desktop.
Save abrjagad/bfa7b16c04deeab78bda to your computer and use it in GitHub Desktop.
isolated scopes.
//
angular.module("MyApp", [])
.controller("MathCtrl", function($scope) {
$scope.add = function(x, y) {
return x + y;
};
})
.directive("myAddThings", function() {
return {
restrict: "E",
template: "{{result}}",
scope: {
localFn: "&fn"
},
link: function(scope) {
scope.result = scope.localFn({
x: 1,
y: 2
});
}
};
});
scope.result = scope.localFn({
x: 1,
y: 2
});
//See how here in the HTML you have...
<my-add-things fn="add(x, y)"></my-add-things>
//http://jonathancreamer.com/working-with-all-the-different-kinds-of-scopes-in-angular/
//=
angular.module("MyApp", [])
.controller("UserCtrl", function($scope) {
$scope.loggedInUser = {
name: "Austin Powers"
}
})
.directive("myUserDirective", function() {
return {
restrict: "E",
template: "<input ng-model='user.name' /></div>",
scope: {
user: "="
},
link: function(scope) {
console.log(scope.user) // { name: "Austin Powers" }
}
};
});
//You would then use this directive like...
<my-user-directive user="loggedInUser"></my-user-directive>
angular.module("MyApp", [])
.controller("UserCtrl", function($scope) {
$scope.loggedInUser = {
firstName: "Austin",
middleName: "Danger",
lastName: "Powers"
};
})
.directive("myUserDirective", function() {
return {
restrict: "E",
template: "{{fullName}}",
scope: {
fullName: "@name"
}
};
});
//And this is how you would use that directive...
<my-user-directive
name="{{loggedInUser.firstName}} {{loggedInUser.middleName}} {{loggedInUser.lastName}}">
</my-user-directive>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment