2016-07-29 198 views
0

我想创建具有范围参数和ng-controler的指令。定制angularjs指令与范围和NG控制器

这是这个指令应该是什么样子:

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

我已经“RegistertedController”在我的应用程序中声明的地方。

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

,我试图申报指令:

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 
      } 
     }; 
    }); 

我得到错误:

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

现在,这个错误是相当翔实的,我得到它的角度不工作的我想在这里。

我可以从指令中删除“scope:{..}”参数并在控制器中定义它,但这不是我所需要的。

我需要的是基本上为自定义指令提供ng-controller,然后为该控制器提供额外的作用域变量。

我该如何做到这一点?

+0

会不会AngularJS组件满足? – doge1ord

回答

0

你必须用标签包装你的指令并把控制器放在那里。

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

没有办法在一个标签中获得两个隔离范围。

+0

是的,它会,但我想知道如果我可以包装ng控制器指令内的另一个指令 –

+0

你可以做出有趣的事情。创建父指令并将其与控制器链接。 然后添加带有require选项的子指令。并访问控制器。可以吗? – Vitalii