I am looking to create a directive that includes both scope parameters and ng-controller.
Here is the desired structure for this directive:
<csm-dir name="scopeParam" ng-controller="RegisteredController">
<!-- Content goes here-->
{{name}}
</csm-dir>
I have a controller named "RegisteredController" defined somewhere in my application.
angular.module('app')
.controller('RegisteredController', ['$scope', function ($scope) {
//$scope.name should be accessible here
}]);
Now, I am attempting to declare the directive:
angular.module('app')
.directive('csmDir', [function () {
return {
restrict: 'AE',
replace: true,
transclude: true,
scope: {
name: '='
},
template: '<section class="layout"><ng-transclude></ng-transclude></section>',
link: function (scope, element, attr, ctrl, transclude) {
element.find('ng-transclude').replaceWith(transclude());
//here I also need scope.name parameter
}
};
});
However, I encounter the following error:
Multiple directives [ngController, csmDir] asking for new/isolated scope on: <csm-dir name="scopeParam" ng-controller="RegisteredController">
This error provides insight into the issue, revealing that Angular does not function as intended.
Removing the "scope: {..}" parameter from the directive and defining it in the controller is not the solution I am looking for.
Essentially, I aim to add ng-controller to a custom directive, along with additional scope variables for that controller.
How can this be achieved?