I have 2 directives within a module. Within one of them, is a templateUrl property. Within that templateUrl, I've made a reference to the other directive, which in turn has a templateUrl.
e.g.
<div> <!--This is my first partial page which uses the SelectorResult directive -->
Here are some results
<div result-carousel>
<!-- here is where some more html should go from result-carousel -->
</div>
</div>
From the module with the directives:
app.directive('SelectorResult', function () {
return {
restrict: 'AE',
scope: {},
templateUrl: '/chooser/Pages/partials/selector-result-tmpl.aspx',
replace: true,
controller: 'SelectorResultController',
controllerAs: 'resultCtrl'
};
});
app.directive('resultCarousel', function () {
return {
templateUrl: '/chooser/Pages/partials/carousel-tmpl.html'
};
});
This is the error I'm getting:
[ngTransclude:orphan] http://errors.angularjs.org/1.2.28/ngTransclude/orphan?p0=%3Cdivlass%3D%carousel-inner%22%20ng-transclude%3D%22%22%3E
I get an error about transclusion, and I've tried some things, but no change. I thought you folks might have ideas.
Related
If I have two directives, one that's a table, and one that's a row. In this case the row is the same each time, and I just want to have it displayed twice in the index.html. <table-row> works in the index.html, but <table> does not why?
i.e.:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:`
<div>
<table-row></table-row>
<table-row></table-row>
</div>`
};
});
Table Row:
.controller('TableRowCtrl', function() {
this.toggle = function() {
this.toggleBool = !this.toggleBool;
}
//
this.toggleBool = false;
})
.directive('TableRow', function() {
return {
scope: {},
restrict: 'E',
replace: true,
controller: 'TableRowCtrl',
controllerAs: 'ctrl',
bindToController: true,
template: `
<div>
<span>Object</span>
<span>
<img ng-click="ctrl.toggle()" src="jpeg file" />
</span>
<span ng-if="ctrl.toggleBool"> Print </span>
</div>`
};
});
If table-row is the other directive that does everything and its controller is also what runs on clicks etc, how would I link in the table-row directive so that the table directive template works, and will call table-row multiple times.I would like to continue using the ControllerAs syntax instead of $scope.
It doesn't matter if you want to use controllerAs or not. From your code table directive has isolate scope and suppose if you want to iterate through table-row items by using ngRepeat directive it should be isolate scope as well.
Remember that every ngRepeat's item has own scope
For example:
.directive('table', function() {
return {
restrict: 'E',
scope: {},
controller: 'table-ctrl',
controllerAs: 'ctrl',
bindToController: true,
template:
<div ng-repeat="item in ctrl.items">
<table-row item="item"></table-row>
</div>`
};
});
So I have a directive and inside the directive view (html) I put a controller however its affecting the rest of the viewModel (vm). What's the best way to isolate a controller to only control specific viewModel?
That's the structure of the view model and directive, I thought ng-controller="ctrl as vm" would only find vm within the class of "controller" but instead its finding every vm on the page.
Directive:
var directive = {
templateUrl: '/Content/app/core/scaffolding/views/popup.html',
restrict: 'A',
link: function (scope, element, attributes) {
console.log('something')
}
};
view:
<div class="directive">
<div class="moreVm">
</div>
<div class="controller" ng-controller="ctrl as vm">
<button ng-click="vm.find()"></button>
</div>
</div>
I tried making "ctrl as jvm" but still the same haha, its just a guess.
<div class="controller" ng-controller="ctrl as jvm">
<button ng-click="jvm.find()"></button>
</div>
Try this.
var directive = {
restrict: "A",
scope: true,
bindToController: {},
controller: "ctrl as vm",
templateUrl: "/Content/app/core/scaffolding/views/popup.html"
};
I've come up with an example using directives which may be of some help - Plunker
As you can see clicking the button in directive2 does not set the value of $scope.aValue in directive1.
JS
var app = angular.module('plunker', [])
.directive("directive1", function accountDir() {
return {
restrict: "EA",
templateUrl: "directive1.html",
scope: {},
controller: function ($scope) {
$scope.$watch("aValue", function(newValue) {
console.log(newValue);
})
}
};
}
)
.directive("directive2", function accountDir() {
return {
restrict: "EA",
templateUrl: "directive2.html",
scope: {},
controller: function ($scope) {
$scope.setAValue = function () {
$scope.aValue = 42;
console.log($scope.aValue);
}
}
};
}
);
Markup
<body>
<directive1></directive1>
</body>
directive1.html
<directive2></directive2>
directive2.html
Directive2
<br>
<button ng-click="setAValue()">Set a value</button>
If I not guess wrong,you want do that when ctrl as different names, the directive console.log different value? or in vm but the value within directive is different with out of the directive?
if you want first ,you just make two controller and then set different value;
controller('ctrl1',function(){ this.name});
controller('ctrl2',function(){ this.name});
else want two
directive('myDir',function(){ return {restrict:'AE',scope:{},controller:function(){this.name='haha'}}})
and now the value is isolate with outer
I am novice in AngularJS. I want to use one template for two directives. In deal, the first directive overrides the behavior of the second. But I've specified different controllers for each of them. I think the reason is isolation of scopes by controllers. I need that the first controller execute its own filterChanged() function and so does the second controller. Same with fields: montage, pay, cancel and inactivity. I tried to manipulate the scope (true, 'isolate', false, {}), transclude (true, false, 'element'), scope fields ('#', '=', '&'). 'controllerAs' and 'controllerBindTo' are unsuitable for my task, because I want to this throw separate controller files.
Help me plz. Hands fall.
Source code below.
filter.html
<div class="filter">
<p class="text-center"><b ng-bind="::title"></b></p>
<div class="contact-item-requires-filter">
<div class="contact-item-require">
<input id="contact-item-montage-filter" class="contact-item-require-montage" type="checkbox"
ng-model="filter.montage"
ng-change="filterChanged()">
<label title="Монтажи" for="contact-item-montage-filter"></label>
</div>
</div>
directive1.js
angular.module('qualityControl')
.directive('requiresFilterDirective', function() {
return {
templateUrl: '../templates/pages/quality/filter.html',
controller: 'requiresFilterController'
}
});
directive2.js
angular.module('qualityControl')
.directive('usersFilterDirective', function() {
return {
templateUrl: '../templates/pages/quality/filter.html',
controller: 'usersFilterController'
}
});
UPDATED.
Add variable with '&', this is function declaration
.directive('requiresFilterDirective', function () {
return {
restrict: 'AE',
scope: {
functionToCall: '&',
someData: '='
},
templateUrl: '../templates/pages/quality/filter.html',
link: function (scope, elem, attrs) {
scope.functionToCall();
console.log('scope.someData', scope.someData);
}
}
})
Usage:
<requires-filter-directive function-to-call="myFunctOne()" some-data="yourJsonObject"></requires-filter-directive>
<requires-filter-directive function-to-call="myFunctTwo()" some-data="yourJsonObject"></requires-filter-directive>
And declare these functions in your main controller:
$scope.myFunctOne = function() {
alert("111")
};
$scope.myFunctTwo = function() {
alert("222")
};
$scope.yourJsonObject = {'aaa':123};
I am trying to send template url from controller to the directive. Hardcoding the template url works fine. Here is what works:
<div my-directive template-url = "my-template.html" ></div>
And in directive
return {
restrict: 'AEC',
templateUrl: function (tElement, tAttrs) {
return tAttrs.templateUrl;
},
controller: 'myController as myCtrl',
scope: {
myDirective: '='
}
};
But I want to use my controller variable when specifying the template-url in the directive. So I tried:
<div nav-switcher template-url="baseCtrl.directiveUrl" ></div>
For which Im getting error message:
Error: [$compile:tpload] Failed to load template: "baseCtrl.directiveUrl"
How to pass controller variable to the directive ?
I think perhaps if you change you HTML to
<div nav-switcher template-url="{{directiveUrl}}" ></div>
The braces will evaluate the expression to text.
I have a directive that is used multiple times on the same page. The documentation has lead me to the following code:
<my-directive info="one"></my-directive>
<my-directive info="two"></my-directive>
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
itemInfo: '=info'
},
templateUrl: 'my_directive.html'
};
});
my_directive.html:
<div ng-repeat="item in itemInfo.items">
<div>{{item.name}}</div>
<div>{{item.value}}</div>
</div>
I can't get it to work, and I suspect it has to do with how I specify the scope in my directive and try to apply it in the ng-repeat. What am I missing?