Angular js. Assign Controller with Directive - angularjs

Question

I try to connect the controller with the directive in Angular.
Here html
<div ng-controller="MyCtrl">
<div id='bbb' my-num>Click Me!</div>
</div>
I use the MyCtrl controller where I define tegid and mytitle.
MainControl.controller('MyCtrl', ['$scope',
function($scope) {
$scope.tegid = '';
$scope.mytitle = 'aaa' + tegid;
}]);
Also I have the directive myNum in which when hover at I receive 'id' and I change its contents
MainDirectives.directive('myNum', function () {
return {
link: function ($scope, element, attrs) {
element.bind('mouseenter', function () {
tegid = element.attr('id');
element.html(mytitle);
});
}
};
});
Problem in that I can't connect the directive and the controller.
Prompt, please, how to transfer tegid to the MyCtrl controller?
Why it is impossible to transfer mytitle to the directive myNum?

Answer 1

You need to pass tegid and mytitle from the controller socpe to the directive scope, by doing as following:
Using isolated scope
Directive:
directive('myNum', function () {
return {
scope: {
id: '=',
title: '='
},
link: function ($scope, element, attrs) {
element.bind('mouseenter', function () {
// scope.id and scope.title are shared with parent scope via HTML bindings
tegid = scope.id;
element.html(scope.title);
});
}
};
Html:
<div id='tegid' title="nytitle" my-num>Click Me!</div>
This will create an isolate scope for your directive and is cleaner. However if you don't intend to reuse the directive elsewhere, you can just rely on scope inheritance, which means you'll have access to the parent scope properties:
Using scope inheritance
Directive:
directive('myNum', function () {
return {
link: function ($scope, element, attrs) {
element.bind('mouseenter', function () {
// scope.teif and scope.mytitle come from the parent scope
tegid = scope.teid;
element.html(scope.mytitle);
});
}
};
Html:
<div my-num>Click Me!</div>

Answer 2

Reference the $scope that is passed thru the link function:
link: function ($scope, element, attrs) {
element.bind('mouseenter', function () {
$scope.tegid = element.attr('id');
element.html($scope.mytitle);
});
}