I'm trying to use ng-view inside a custom directive but it's not working and it's also not giving me any console error.
This is my directive:
(function() {
'use strict';
angular
.module('app')
.directive('header', Header);
Header.$inject = ['USER_AGENT'];
function Header(USER_AGENT) {
return {
restrict: 'A',
templateUrl: 'app/shared/header/header.html',
controller: controller
}
function controller($scope) {
$scope.isMobile = USER_AGENT.isMobile;
}
}
})();
And inside header.html file I have a call to ng-view just like I was calling it outside (when it was working).
Is it possible to nest ngView inside a custom directive?
AngularJS does not support multiple ng-views in one app. If you want it - you have to use another routing engine, for example Angular UI's ui-router
Even if you could use it you shouldn't because is not the correct approach for Angular a directive should be treated like a web component like input, select, etc.
Just remember that your header.html is just a view and can be used by pretty much anything, is just the view
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
templateUrl: 'app/shared/header/header.html',
controller: controller
});
Or (using ui-router)
$stateProvider
.state('home', {
url: '/?accountkey',
templateUrl: 'app/shared/header/header.html',
controller: controller
});
Related
I recently learned about Angular.js. Here I integrate Angular.js with Beego (Go Framework) to develop Single Page Application. I confuse how to automatically invoke method inside Angular controller?
Here's my angular controller:
angular.module('myApp')
.controller('BarangMasukController', ['$scope', '$http', 'myServices', function ($scope, $http, myServices) {
var initializeTask = function () {
myServices.testAPI()
.then(function (response) {
$scope.Sa = response.data.S;
$scope.Da = response.data.D;
console.log("Sa"+$scope.Sa);
console.log("Da"+$scope.Da);
});
}
initializeTask();
}]);
My angular service:
angular.module('myApp')
.factory('myServices', ['$http', function ($http) {
return {
//testapi
testAPI: function () {
return $http.get('/myapi');
},
};
}]);
my angular routes:
angular.module('myApp').config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/testAPI", {
templateUrl: "static/views/penjualan/manage_penjualan.tpl",
controller: 'BarangMasukController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
As you can see, I need to call method initializeTask() manually in my controller. The problem arise when there are multiple methods inside my controller. Please help.
If you want your methods to be automatically invoked, you can make use of Immediately Invoked Function Expression (IIFE) from JavaScript which is a function that runs as soon as it is defined.
(function () {
// logic here
})();
See the Mozilla developer guide for more info.
If you want to place all your initialization logics in a method and if you are using components then you can make use of angularjs $onInit() lifecycle hook which will automatically get invoked after all the controllers on an element have been constructed and had their bindings initialized. More info can be found here.
I am new to Angular.js and I am trying to make a custom directive(which has a controller with functions in it) that is linked to a controller. When an object in the controller($scope.MyObj), changes I would like to have a similar object in my directive controller that changes the same way. In addition is it possible to invoke a function/scope method that is declared in my directive controller, from my basic controller(or invoke a function from my directive controller when an object from the basic controller has changed.) ?
Aviv Ben-Yosef writes a pretty nice post about it on http://www.codelord.net where he basically hooks into the controller from a isolated directive scope:
http://www.codelord.net/2015/09/02/controller-directive-communication-part-3-controller-to-directive/
if you are using Angular 1.4 and above you can use bindToController something like this:
.directive('mdAddress', function mdAddress() {
var directive = {
restrict: 'EA',
scope: {},
bindToController: {
address: '='
},
templateUrl: 'modules/address/address.html',
controller: AddressController,
controllerAs: 'dir'
};
Here's one thing I'm used to do with angular directives
angular.module('app.directives').directive('login', ['$templateCache', function ($templateCache) {
return {
restrict: 'E',
template: $templateCache.get('directives/login/login.html'),
controller: 'LoginController as vm',
scope: true
};
}]);
I've grown very attached to using Template Cache to inject HTML content in my directive's template. Now with Angular 1.5 there's this new thing all the cool kids are using called component() which I'm giving a look to see if it's really good and I'm stuck at this very beginning part: how to inject things in the component itself (not in the controller)?
In this case you can see that I'm injecting into the login directive the $templateCache dependency. How would I rewrite this directive as a component? (keeping in mind my desire to use $templateCache over templateUrl)
Well, In Angular 1.5 components, template property can be a function and this function is injectable (documentation).
So, you can just use something like:
...
template: ['$templateCache', function ($templateCache) {
return $templateCache.get('directives/login/login.html')
}]
...
Few links from google search: one and two.
Hope it will help.
MaKCblMKo 's answer is right, but remember that AngularJS will check the templateCache first before going out to to retrieve the template. Therefore, you don't have to make this call in your directive or component.
angular.module('myApp', [])
.component('myComponent',{
templateUrl: 'yourGulpPattern'
})
.run(function($templateCache) {
$templateCache.put('yourGulpPattern', 'This is the content of the template');
});
https://jsfiddle.net/osbnoebe/6/
Here is my controllers.js file
(function(ctx,angular){
'use strict';
angular.module('app.controllers')
.controller('SearchMasterController',['$scope',function($scope){
//My Code
}]);
})(window, angular);
And this is my directives.js file
(function(ctx,angular){
function ControllerFunction(){
//My Controller Code
}
var directiveConfig = {
restrict:'E',
templateUrl:'path/to/acco.html',
controller: ControllerFunction
}
angular.module('app.directives')
.directive('acco', function(){
return directiveConfig;
});
})(window, angular);
Now my question is, can I use this acco directive with some different controller. Ideally, is there any way to get it working like
<acco ng-controller="SearchMasterController"></acco> ?
I tried doing,
<acco>
<div ng-controller="SearchMasterController"></div>
</acco>
and it seems to work.
Is it possible to use
<acco ng-controller="SearchMasterController"></acco> ?
The latter alternative looks ugly to me.
nice to heard this type of access, i have tried
<acco>hi{{name1}}
<div ng-controller="SearchMasterController">{{name1}}</div>
</acco>
<acco ng-controller="SearchMasterController">{{name1}}</acco>
<script>
angular.module('myApp', [])
.controller('SearchMasterController', ['$scope', function ($scope) {
//My Code
console.log("search");
$scope.name1 = 'james';
}])
.directive('acco', function () {
return{
restrict: 'E',
templateUrl: 'acco.html',
controller: function($scope) {
//My Controller Code
console.log("cntrlr fn");
$scope.name1 = 'semaj';
}
};
});
</script>
#that time i getting output as
cntrlr fn
search
cntrlr fn
means if we are using like
<acco>hi{{name1}}
<div ng-controller="SearchMasterController">{{name1}}</div>
</acco>
then we can access both controllers but when we are using like
<acco ng-controller="SearchMasterController">{{name1}}</acco>
we can't access SearchMasterController and it's not loaded also..
Yes you can use some different controller for your directive, but there is some best practice
Use controller when you want to expose an API to other directives. Otherwise use link.
The way you tried to use controller doesn't make much sense
<!--here acco and ng-controller both are directives,
in your directive's 'ControllerFunction' and ng-controller's 'SearchMasterController'
has the same controll (scope) for 'acco' rendered html.
In that case your directive's controller overrite ng-controller functionality.
So leave 'ng-controller',
if you need any functionality in your directive
then pass those functionality using =,&,#-->
<acco ng-controller="SearchMasterController"></acco>
I'm new to Angular.js which is why I have a basic question regarding routing. I figured out how to create routes and inject specific .htmls by $routeProvider
var app = angular.module('test', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'routes/view2.html'
});
});
but what I really don't get is how content or function of view2.html are handled in Angular.
Lets take view2.html. It has a <p> with some text in a specific color. Nothing to special. But also it has a little slideshow which is called by $('slideshow').cycle() function.
All what happens is it displays me the <p> tag in a different color and no slideshow function is called on my rootsite of the app.
Could you give me some approach how to actually solve this?
Thanks
Just load required view and then compile it. During compilation Angular processes all directives in view.
If you want to do this proper(Angular) way you should put such code like $('slideshow').cycle() inside of directive. And then use it like
<div my-slideshow=""></div>
angular.module('myModule', [])
.directive('mySlideshow', [function () {
return {
restrict: 'A',
link: function (scope, element) {
element.cycle();
}
}
}]);
Directives documentation
Much more comprehensive documentation