Skip to content

Instantly share code, notes, and snippets.

@ahomu

ahomu/1.include.html

Last active August 29, 2015 14:02
Show Gist options
  • Save ahomu/cd83e1ccce96095ea071 to your computer and use it in GitHub Desktop.
Save ahomu/cd83e1ccce96095ea071 to your computer and use it in GitHub Desktop.
Download ZIP
ng-repeat時に、オブジェクト内の値で、ディレクティブのテンプレート、または振る舞いを変える場合のパターン検証
Raw
1.include.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body ng-app="mu.aho">
<div ng-controller="AcmeCtrl">
<h1>ふぁきゅー</h1>
<ul ui-sortable="sortableOptions" ng-model="items" id="list">
<li ng-repeat="item in items">
{{item.type}}パターン
<p ng-include="item.type + '.html'"></p>
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/g/[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script>
angular.module('mu.aho', ['ui.sortable'])
.controller('AcmeCtrl', ['$scope', function($scope) {
$scope.sortableOptions = {};
$scope.items = [
{type : 'A'},
{type : 'B'},
{type : 'A'},
{type : 'A'},
{type : 'A'},
{type : 'B'},
{type : 'B'}
];
}]);
</script>
</body>
</html>
Raw
2.compile.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body ng-app="mu.aho">
<div ng-controller="AcmeCtrl">
<h1>ふぁきゅー</h1>
<ul ui-sortable="sortableOptions" ng-model="items" id="list">
<li ng-repeat="item in items">
{{item.type}}パターン
<type-of></type-of>
</li>
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/g/[email protected]%28jquery.ui.core.min.js+jquery.ui.widget.min.js+jquery.ui.mouse.min.js+jquery.ui.sortable.min.js%29"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
<script>
angular.module('mu.aho', ['ui.sortable'])
.controller('AcmeCtrl', ['$scope', function($scope) {
$scope.sortableOptions = {};
$scope.items = [
{type : 'A'},
{type : 'B'},
{type : 'A'},
{type : 'A'},
{type : 'A'},
{type : 'B'},
{type : 'B'}
];
}])
.directive('typeA', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'A.html',
link: angular.noop
};
})
.directive('typeB', function() {
return {
restrict: 'E',
replace: true,
templateUrl: 'B.html',
link: angular.noop
};
})
.directive('typeOf', ['$compile', function($compile) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
var tagName = 'type-' + scope.item.type;
element.append($compile('<' + tagName + '></' + tagName + '>')(scope))
}
}
}]);
</script>
</body>
</html>
Raw
3.A.html
<p>ŧ‹"ŧ‹"( 'ч' )ŧ‹"ŧ‹"</p>
Raw
4.B.html
<p>'`,、'`,、('∀`) '`,、'`,、</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment