I have in my directive the controller and link in the following way:
myapp.directive('MyDirective', function(){
return{
restrict: 'A',
transclude: true,
scope: {
....
},
controller: function($scope) {
$scope.variable = true;
},
templateUrl: './app/templates/template.html',
link: function(scope, element, attrs){
scope.$watch('variable ', function(){
console.log("variable : " + scope.variable )
});
}
.....
I am not able to see the scope.variable in the block link. How I can resolve it?
Related
How do I access a parent directive's variable? I keep getting undefined.
I'm trying to access from productName to productTitle. Running angular 1.6
angular.module('appStore').controller(
'TestController', function($scope, Note){
$scope.yell = function(){
return Note(5);
};
}
);
angular.module('appStore').directive('productTitle', function(){
return {
restrict : 'E',
templateUrl : 'product-title.html',
scope : {
age : '='
},
controller : function($scope){
$scope.name = "mary";
},
link : function(scope, element, attrs){
}
};
});
angular.module('appStore').directive('productName', function(){
return {
restrict: 'E',
templateUrl: 'product-name.html',
require: '^productTitle',
link : function(scope, element, attrs, ctrl){
console.log('test');
console.log(ctrl.name); // undefined???
console.log(ctrl.age); // undefined???
},
transclude: true
};
});
index.html:
<div ng-controller="TestController">
<product-title age="6"></product-title>
</div>
product-title.html
<h3>Product Titles</h3>
<product-name></product-name>
product-name is blank.
Lets say i have a controller A:
app.controller('A', function($scope) {
$scope.commonvalue = "";
})
app.directive('dir1', function() {
return {
restrict: 'E',
templateUrl: 'template1.html',
controller: 'A'
};
});
app.directive('dir2', function() {
return {
restrict: 'E',
templateUrl: 'template2.html',
controller: 'A'
};
});
DIR1
template1.html:
<label>Enter value: </label>
<input ng-model="commonvalue"> </input>
DIR2
template2.html:
<p> The value of commonvalue variable is {{ commonvalue }} </p>
All i want to do is change the value of commonvalue from dir1 and get its value in dir2. One solution is to make the commonvalue variable in $rootScope. but i do not want to do that. I only want to change it in 'A' Controllers scope.
You can try something like this.
<div ng-app="myapp" ng-controller="myCtrl">
<my-changer ng-model="someVal"></my-changer>
<my-receiver ng-model="someVal"></my-receiver>
</div>
angular.module("myapp", [])
.controller("myCtrl", function($scope){
$scope.someVal = "Hello";
}).directive("myChanger", function(){
return {
restrict: "E",
scope: {
txtVal : "=ngModel"
},
template: "<input type='text' ng-model='txtVal'/>",
link: function(scope, elem, attr, ngModelCtrl){
}
};
}).directive("myReceiver", function(){
return {
restrict: "E",
scope: {
txtVal : "=ngModel"
},
template: "<input type='text' ng-model='txtVal'/>",
link: function(scope, elem, attr, ngModelCtrl){
}
}
});
JSFiddle
--EDIT---
If you are looking for one way binding then do this.
angular.module("myapp", [])
.controller("myCtrl", function($scope){
$scope.someVal = "Hello";
}).directive("myChanger", function(){
return {
restrict: "E",
scope: {
txtVal : "=ngModel"
},
template: "<input type='text' ng-model='txtVal'/>",
link: function(scope, elem, attr, ngModelCtrl){
}
};
}).directive("myReceiver", function(){
return {
restrict: "E",
scope: {
txtVal : "=ngModel"
},
template: "<p ng-bind='txtVal'/>",
link: function(scope, elem, attr, ngModelCtrl){
}
}
});
Updated JSFiddle
what you want is actualy normal behavior.
when you dont specify a scope for your directive, it will inherit properties from its controller, and when ever a value changes it'll reflect back in the controller..
see this plnkr
app.controller('MainCtrl', function($scope) {
$scope.obj = {};
$scope.obj.commonvalue = "initial value";
});
app.directive('dir1', function() {
return {
restrict: 'A',
templateUrl: 'dir1.html'
}
})
app.directive('dir2', function() {
return {
restrict: 'A',
templateUrl: 'dir2.html'
}
})
I've updated the answer to use a 'dotted' ng-model, I think that was your issue at first. You can review my answer where it is explained why it's important.
from the answer:
What happens is that the child scope gets its own property that hides/shadows the parent property of the same name
You can define scope variable with '=' char in your directives and pass 'commonvalue' to them:
https://jsbin.com/fobofepuji/1/edit?html,js,output
I have dC directive
app.directive('dC', function($rootScope) {
return {
restrict: 'AE',
link: function(scope, element, attrs) {},
templateUrl: function(elem, attrs) {
return $rootScope.somePosiT
}
}
});
And I want to access inside of my controller as function is there anyway can I achieve it in order to change my directive location dynamically when click fired
app.controller('appCtrl', function($scope, $rootScope) {
clk: function() {
$rootScope.somePosiT = 'views/1.html'
}
})
I think you could do it using template and ng-include - rather than templateUrl. I think templateUrl is called before the scope values are available. You could try something like this:
app.directive('dC', function($rootScope) {
return {
restrict: 'AE',
link: function(scope, element, attrs) {},
template: '<div ng-include="somePosiT"></div>'
};
});
app.controller('appCtrl', function($scope, $rootScope) {
$scope.clk = {
somePosiT: "path/to/template.html"
};
});
app.controller('myController',['$scope',function($scope){
$scope.temp = '007'; // my controller variable
}]);
app.directive('mydir', function() {
return {
restrict: 'A',
transclude: true,
scope: { mydirobj: '=mydir' },
link: function(scope, element, attrs)
{
console.log(scope.temp);
// here i am trying to access 'myController' controller scope var
// getting error
}
};
});
app.controller('myController', ['$scope',
function($scope) {
$scope.temp = '007'; // my controller variable
}
]);
app.directive('mydir', function() {
return {
restrict: 'A',
transclude: true,
controller: 'myController', // add it here
scope: {
mydirobj: '=mydir'
},
link: function(scope, element, attrs) {
console.log(scope.temp);
// here i am trying to access 'myController' controller scope var
// getting error
}
};
});
You can see my comment inline.
How can pass the variable itemSelect inside my directive to my controller?
mDirective.directive('directive', function() {
return {
restrict: 'A',
scope: {
options: "="
},
templateUrl: '',
link: function(scope, element, attrs) {
.........
$(element).find('.typeY').on('change', function() {
var itemSelect = $(element).find('.typeY').val();
});
} ,
};
});
Something like
mDirective.directive('directive', function() {
return {
restrict: 'A',
scope: {
options: "=",
selected:"=",
},
templateUrl: '',
link: function(scope, element, attrs) {
.........
$(element).find('.typeY').on('change', function() {
scope.$apply(function() {
scope.selected=value; // value from the element
});
});
} ,
};
});
At html level
<div directive options='expression' selected='expressionToTheScopeProperty'/>