在 Angular 中，如何将指令的控制器共享到其子内容(当 transclude 为 true 时)

Question

我尝试在SO上搜索参考文献。但对答案不满意。我是安格尔的新手。我试图通过创建这样的指令来实现隐含：

app.directive('wrapperDirective',function(){        
        return{            
            restrict :'E',           
            controller:'wrapperCtrl',
            template :'<div class="widget-template" ng-transclude></div>',
            transclude: true,
            replace:true,
            scope:{              
              cityList : '='
            }            
        }        
    });
app.controller('wrapperCtrl', ['$scope',function($scope, $rootScope){
        $scope.citynames = $scope.cityList;
});


<wrapper-directive cityList="Bangalore">    
     <div>{{ citynames  }}</div>
 </wrapper-directive>

现在，如何使声明为子内容属性的数据可用。我真的很困惑，请帮忙。

Answer 1

当你使用范围和指令时，由于控制器可以有自己的作用域，你可能会混淆

。

执行此操作的另一种方法是将控制器用作语法。只需在控制器中声明如下：

function myController($scope) {
    var vm = this;
    vm.yourAttribute = value;
}

像这样，您可以使用

 wrapperCtrl.yourAttribute

如果编写wrapperCtrl.yourAttributes太长，则可以使用属性控制器，如下所示

app.directive('wrapperDirective',function(){        
        return{            
            restrict :'E',           
            controller:'wrapperCtrl',
            controllerAs: 'yourname',
            template :'<div class="widget-template" ng-transclude></div>',
            transclude: true,
            replace:true,
            scope:{              
              cityList : '='
            }            
        }    

});

仅在要访问属性时才执行yourname.yourAttribute