Skip to content

Instantly share code, notes, and snippets.

/index.html

Created November 3, 2016 18:35
Show Gist options
  • Save anonymous/2a41dc817f23e5ac71e7e48d3c0a9df9 to your computer and use it in GitHub Desktop.
Save anonymous/2a41dc817f23e5ac71e7e48d3c0a9df9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/woqowetuze
Raw
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<spinner load="loading">
<blah yo="otherScopeVariable" ></blah>
</spinner>
<script id="jsbin-javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.otherScopeVariable = 'Blah';
$scope.loading = true;
setTimeout(
function () {
$scope.$applyAsync(
function () {
$scope.loading = false;
}
);
}, 1000
);
});
app.directive('blah', function () {
return {
restrict: 'E',
template: '<span><i>Really {{otherScopeVariable}}</i></span>'
}
});
app.directive('spinner', function () {
return {
restrict: "E",
replace: true,
transclude: true,
scope: { load: '=' },
template: '<strong>Loading...</strong>',
link: function(scope, element, attrs, ctrl, transclude){
var cancelWatch = scope.$watch('load', function (stillLoading) {
if (!stillLoading) {
element.replaceWith(transclude());
cancelWatch();
}
});
},
};
});
</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.otherScopeVariable = 'Blah';
$scope.loading = true;
setTimeout(
function () {
$scope.$applyAsync(
function () {
$scope.loading = false;
}
);
}, 1000
);
});
app.directive('blah', function () {
return {
restrict: 'E',
template: '<span><i>Really {{otherScopeVariable}}</i></span>'
}
});
app.directive('spinner', function () {
return {
restrict: "E",
replace: true,
transclude: true,
scope: { load: '=' },
template: '<strong>Loading...</strong>',
link: function(scope, element, attrs, ctrl, transclude){
var cancelWatch = scope.$watch('load', function (stillLoading) {
if (!stillLoading) {
element.replaceWith(transclude());
cancelWatch();
}
});
},
};
});</script></body>
</html>
Raw
jsbin.woqowetuze.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.otherScopeVariable = 'Blah';
$scope.loading = true;
setTimeout(
function () {
$scope.$applyAsync(
function () {
$scope.loading = false;
}
);
}, 1000
);
});
app.directive('blah', function () {
return {
restrict: 'E',
template: '<span><i>Really {{otherScopeVariable}}</i></span>'
}
});
app.directive('spinner', function () {
return {
restrict: "E",
replace: true,
transclude: true,
scope: { load: '=' },
template: '<strong>Loading...</strong>',
link: function(scope, element, attrs, ctrl, transclude){
var cancelWatch = scope.$watch('load', function (stillLoading) {
if (!stillLoading) {
element.replaceWith(transclude());
cancelWatch();
}
});
},
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment