具有范围和ng-controller的自定义angularjs指令

Question

I want to create directive that has scope parameters and ng-controler both.

This is how this directive should look:

<csm-dir name="scopeParam" ng-controller="RegisteredController">
   <!--Here I want to have content--> 
   {{name}}
</csm-dir>

I have "RegistertedController" declared somewhere in my app.

angular.module('app')
    .controller('RegisteredController', ['$scope', function ($scope) {
        //$scope.name should be accessible here
    }]);

And I am trying to declare 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
            }
       };
    });

I get error:

Multiple directives [ngController, csmDir] asking for new/isolated scope on: <csm-dir name="scopeParam" ng-controller="RegisteredController">

Now this error is quite informative, and I get it angular doesn't work as I would like here.

I could remove "scope: {..}" parameter from directive and define it in controller, but it's not what I need.

What I need is basically to provide ng-controller to custom directive, and then provide additional scope variables for that controller.

How can I achieve this?

Answer 1

You have to wrap your directive with tag and put controller there.

<div ng-controller="RegisteredController">
   <csm-dir name="scopeParam">
       <!--Here I want to have content--> 
       {{name}}
   </csm-dir>
</div>

There is no way to get two isolated scopes in one tag.