<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.5" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="test" ng-controller="controller">
<h1>Directive: pass 'attr @', 'expr() &', and 'object{} ='</h1>
<ul>
<li><strong>attr:</strong> {{attribute1}}</li>
<li><strong>array:</strong>
</li>
<li>
<ol>
<li ng-repeat="o in array1">{{o.lname}} {{o.fname}}</li>
</ol>
</li>
<li><strong>expr:</strong> see console.log - {{expression111()}}</li>
</ul>
<hr />
<william attr="{{attribute1}}" expr="expression1()" ary="array1">
located in index.html `william` directive, need to be tranincluded into directive template.
</william>
</body>
</html>
// Code goes here
'use strict';
var app = angular.module('test', []);
app.controller('controller', function($scope) {
$scope.attribute1 = 'Parent controller attribute.';
$scope.expression1 = function() {
console.log('this is parent controller expr.');
};
$scope.array1 = [{
fname: 'fname1',
lname: 'lname1'
}, {
fname: 'fname2',
lname: 'lname2'
}];
});
app.directive('william', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
templateUrl: "template.html",
scope: {
'attr': '@',
'ary': '=',
'expr': '&'
},
controller: function($scope) {
$scope.attr1 = 'attr in myself NOT active.';
},
link: function(scope, element, attrs) {
console.log('Parent expr() function.', attrs);
}
}
});
.directive {
border: 1px solid red;
width: auto;
padding: 10px;
height: auto;
margin: 10px 0px;
}
<div>
<h3>This need to be transclude:</h3>
<ng-transclude></ng-transclude>
<hr/>
<p><strong>attr:</strong> {{attr}}</p>
<strong>array:</strong>
<ol>
<li ng-repeat="o in ary">{{o.fname}}, {{o.lname}}</li>
</ol>
<p><strong>expr:</strong> see console.log - {{expr()}}</p>
</div>