I'm trying to understand "scopes" in agularJS and i can't understand the following piece of code:
HTML:
<body ng-app="myModule">
<div ng-controller="MyCtrl">
<my-component>
<h2>Attribute</h2>
{{isolatedAttributeFoo}}
</my-component>
<my-component>
<h2>Attribute</h2>
{{isolatedAttributeFoo}}
</my-component>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="app.js"></script>
AngularJS:
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{}
};
})
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.isolatedAttributeFoo = 'Hello!';
}]);
As you can see it is a very simple test. As far as i know (from this example), the childs of a directive (in the example, the elements inside "my-component") inherit the scope from the directive and, since the "my-component" scope is isolated, the "isolatedAttributeFoo" variable should NOT take the value from the "isolatedAttributeFoo" variable at the controller... But it does. Why? Am i misunderstanding something?
If you want to try it, here is the Fiddle.
You can only isolate the scope when you include the template or templateUrl in the directive definition. Other wise it will only inherit from parent and view won't even recognize any changes to scope made in link or controller of directive
Try the following:
HTML
<my-component></my-component>
JS
.directive('myComponent', function () {
return {
restrict:'E',
template: ' <h2>Attribute</h2>{{isolatedAttributeFoo}}',
scope:{},
link:function(scope){
scope.isolatedAttributeFoo = 'Good Bye!';
}
};
});
DEMO
I think this will be clear:
Here is a fiddle:
https://jsfiddle.net/kst65t0p/3/
var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
return {
restrict:'E',
scope:{},
link : function(scope){
alert(scope.isolatedAttributeFoo);
}
};
})
.controller('MyCtrl', ['$scope', function () {
this.isolatedAttributeFoo = 'Hello!';
}]);
<div ng-app="myModule" ng-controller="MyCtrl">
<my-component>
<h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
</my-component>
<my-component>
<h2>Attribute</h2> {{MyCtrl.isolatedAttributeFoo}}
</my-component>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
Your scope is isolated into the link function.
The link function is to a directive what a controller is to the view.
Related
Actually i was new to angular js i am trying to call my factory operation into controller i dont know where i am going wrong
and my js goes here
app.factory("myFactory",function(){
var something = {};
something.getsum = function() {
$scope.service = " heloo people"
}
return something;
});
app.controller("helloController", function($scope,myFactory) {
$scope.clickme = function() {
$scope.service=myFactory.getsum();
}
});
and my html goes here
<div ng-controller="hello controller">
<button ng-click="clickme"></button>
<h2>{{service}}</h2>
</div>
and my config goes here:
$urlRouterProvider.otherwise("/index/utilise");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "display.html",
controller:'mainController',
controllerAs: "parentCtrl",
})
.state('index.sample', {
url: "/home",
templateUrl: "content/sample.html",
})
.state('index.utilise', {
url: "/utilise",
templateUrl: "content/utilise.html",
})
})
First issue is that to use the myFactory factory in your controller you would need to inject it into the controller via dependency injection:
app.controller("helloController", function($scope, myFactory) {
$scope.clickme = function() {
$scope.service = myFactory.getsum();
}
});
Second issue you would not use $scope in the myFactory factory method getsum(), you would simply return the value you need:
app.factory("myFactory",function(){
var something = {};
something.getsum = function() {
return " heloo people";
}
return something;
});
Third issue is ng-click was not actually execute controller function clickme as there was parenthesis () as you would with any JavaScript function. It should be ng-click="clickme()" to actually call the function on the controller:
<div ng-controller="helloController">
<button ng-click="clickme()"></button>
<h2>{{service}}</h2>
</div>
Finally, it's unclear what the structure of your application based on the ui-router configuration your provided. With ui-router you wouldn't really have the need to use ng-controller as you can specify what controller any given view should be using. I've created multiple Plunkers, one and two, demonstrating the factory functionality with and without controllers specified for child routes. This should be more than enough to demonstrating calling a controller function in different situations.
Hopefully that helps!
I'm in the middle of refactoring an old project to use custom directives, and I'm already running into a problem. I'm just trying to make a simple directive and build from there. I have a logger function in my directive's link function that just runs a console.log. I'm not sure what I'm missing here, and I'm sure it's something simple. Here's my directive:
'use strict';
(function() {
angular
.module('sigFig')
.directive('myDirective', myDirective);
function myDirective(sigFigFactory) {
var directive = {
restrict: 'E',
replace: 'true',
templateUrl: 'Directives/directiveTemplate.html',
link: link,
compile: compile
};
return directive;
function link(scope, element, attrs) {
scope.logger = function() {
console.log('DING!!!');
}
}
function compile(scope, element, attrs) {
console.log('I AM A COMPILE FUNCTION');
}
}
})();
The HTML template for it is just:
<button ng-click="logger()">CLICK ME</button>
And I'm calling it in my HTML like this:
<my-directive></my-directive>
The button appears and that console.log in my compile works, but the ng-click does not. What is it I'm missing? Thanks in advance!
Add scope to directive variable: scope:{},
function myDirective(sigFigFactory) {
var directive = {
scope:{},
restrict: 'E',
replace: 'true',
templateUrl: 'Directives/directiveTemplate.html',
link: link,
compile: compile
};
return directive;
I have never created an angular application without a controller. So I'm positive that that is your issue here.
Example of your code with a controller.
html:
<body ng-app='sigFig' ng-controller='ctrl'>
<my-directive></my-directive>
</body>
js:
(function() {
angular.module('sigFig', [])
.controller('ctrl', function($scope){
$scope.itemH = 'hahaha'
})
.directive('myDirective', myDirective);
function myDirective() {
return {
restrict: 'E',
template: '<button ng-click="logger()">{{item}}</button>',
link: function link(scope, element, attrs) {
scope.item = "Logger Click Me";
scope.logger = function() {
alert('logger')
}
}
};
function compile(scope, element, attrs) {
console.log('I AM A COMPILE FUNCTION');
}
}
})();
I want to inject html into an angular page
My controller starts with:
myapp.controller("myCtrl", function ($scope, $http, $stateParams, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<p>Hello</p>";
And on my HTML page I have:
<div class="intro"> AA {{renderHtml(pgf)}} AA </div>
And in the browser, I see:
AA <p>Hello</p> AA
Where what I want is
AA
Hello
AA
Is this a version problem- how do pick a consistent set of versions? (If I just raise the versions, I get all sorts of errors...)
You have to use ng-bind-html (angular ngBindHtml docs) to bind HTML content...
CONTROLLER
function myCtrl($scope, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<p>Hello I'm a Bear</p>";
}
HTML
<div ng-bind-html="renderHtml(pgf)"></div>
Additionally, here you are a working PLUNKER with your example.
So your Angular code works but you didn't place your html binding in the right place.
You can't set a function inside angular binding {{ function }}
So in your HTML should say <div ng-bind-html="trustHTML(pgf)"></div>
Try ngBindHtml directive in module ng. It provides a secure way of binding content to an HTML element.
Syntax :
<element ng-bind-html="expression"></element>
DEMO
var app = angular.module('myApp', []);
app.controller('MainCtrl', ['$scope', '$sce', function($scope, $sce) {
$scope.renderHtml = function(html_code) {
return $sce.trustAsHtml(html_code);
};
$scope.pgf = "<h1>Hello I'm a Bear</h1>";
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainCtrl">
<div ng-bind-html="renderHtml(pgf)"></div>
</div>
In my main html, I have a view which loads templates.
<div data-ng-view></div>
It loads a html whenever the link is clicked.
app.config(["$routeProvider", function ($routeProvider) {
'use strict';
$routeProvider
.when("/", {
templateUrl: "events.html"
});
}]);
On this page (template) , I have a directive which loads another html file
app.directive('ngPost', function () {
'use strict';
return {
restrict: 'A',
templateUrl: 'postbox.html'
};
});
I then use this directive on my events.html page by using <div data-ng-Post></div>
In postbox, I have two input fields and a button
<input type="text" id="user" data-ng-model="username" />
<input type="text" id="mess" data-ng-model="message"/>
<button data-ng-click="Add(eventid-1, username, message)">Post</button>
Upon clicking the button, I have some operations, then I try to clear the input fields, but I cannot. Method here :
$scope.Add = function (index, uname, msg) {
var a = {user: uname, message: msg, time: new Date()};
$scope.data[index].messages.push(a);
$scope.message = ''; // clearing here
$scope.username ='';
};
The clearing does not happen, I do not know why. My controller that has this Add method wraps the <div data-ng-view></div>in the main html file so it is the outermost controller and should have access to all $scope models inside. Why does it not work?
Note that the operations before the clearing works with no problems
Your add method is in the parent scope. The parent's scope cannot see it's children, it works the other way around. The message and username properties are defined in the directive's child scope. From a child you can reference parent properties, but not the other way around.
If you add scope: false and transclude: false to your directive, it won't create it's own scope and instead use its parent's scope, so your directive would look something like this:
angular.module('app', []).controller("myController",myController);
function myController($scope){
var ctrl = this;
ctrl.hello ="Hello"
};
angular.module('app').directive("childThing", function() {
return {
template: '<div>{{message}}</div><div>{{username}}</div>',
scope: false,
transclude: false,
controller: function($scope) {
$scope.username="Mike Feltman"
$scope.message="Hi Mike"
}
}
})
and you can access the elements that the directive adds to the scope from the parent like this:
<div ng-controller="myController as ctrl">
{{username}} in the parent.
<div>{{ctrl.hello}}</div>
<child-thing></child-thing>
</div>
Update using your template:
{{username}} in the parent.
{{ctrl.hello}}
Javascript:
function myController($scope){
var ctrl = this;
ctrl.hello ="Hello"
$scope.add = function() {
alert($scope.username)
}
};
angular.module('app').directive("childThing", function() {
return {
template: '<input type="text" id="user" data-ng-model="username" /><input type="text" id="mess" data-ng-model="message"/>',
scope: false,
transclude: false,
}
})
i get this error when i start the app
this is the controller:
myApp
.controller('NavController',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'main';
return page === currentRoute ? 'active' : '';
};
}]);
and this is the app.js:
angular.module('myApp',[
'ngRoute'])
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'views/main.html',
controller: 'mainCtrl'
})
.when('/team1',{
templateUrl:'views/team1.html',
controller: 'mainCtrl'
})
}]);
and the htmlIndex where i use the contoller:
<header>
<div class="container">
<div class="navbar">
<ul class="nav navbar-nav" ng-controller="NavController">
<li ng-class="navClass('home')"><a href='#/'>Home</a></li>
<li ng-class="navClass('home')"><a href='#/team1'>team1</a></li>
</ul>
</div>
</div>
</header>
i click the nav buttons nothing happens and in the console i get this error "Argument 'NavController' is not a function, got undefined"
Maybe you call controller in a wrong way. It should be called on a app like this:
angular.module('myApp')
.controller('NavController',
['$scope', '$location', function ($scope, $location) {
$scope.navClass = function (page) {
var currentRoute = $location.path().substring(1) || 'main';
return page === currentRoute ? 'active' : '';
};
}]);
Take a look at this fiddle for a complete code: https://jsfiddle.net/q91jozyr/
When you define the module with angular.module('myApp', ['ngRoute']) you need to save the reference in the variable myAppto reuse the module, when declaring the controller.
app.js:
var myApp = angular.module('myApp', ['ngRoute'])
Alternatively I suggest to call the controller by reusing the module like this:
controller:
angular.module('myApp').controller('NavController', [ /* etc... */ ]);
Note that the module is being reused, if you don't specifiy the dependencies again like angular.module('myApp') instead of angular.module('myApp', [ ]).
In both cases make sure the module myApp is bootstrapped by adding ng-app="myApp" to any of the parent elements, e.g. the <body>:
<body ng-app="myApp">