使用控制器而不是鏈接將父控制器作用域轉換爲指令

Question

我爲指令所需的所有功能都使用了'LocalCtrl'控制器，但是如何將父控制器的作用域從指令傳回到控制器。

我的指令嵌入在父控制器中。我知道如何使用鏈接功能並隔離指令和控制器之間的雙向綁定的範圍。我不知道如何通過使用以下結構繼承父範圍。

<div ng-controller = "mainCtrl"> 
    <my-directive></my-directive> 
</div> 

app.controller('mainCtrl',function ($scope) { 
    $scope.mainContent = "this is main content" 
}); 

app.controller('LocalCtrl',function() { 
    var vm = this; 
    vm.content = "This is Header" 
}); 
app.directive('mydirective',function() { 
    return{ 
     controller:'LocalCtrl as local', 
     templateUrl: '<div>{{local.content}}</div>', 
    } 
}); 

Answer 1

指令在Angularjs有3個範圍，下面

如所提到的參考In which cases angular directive scope equals controller scope?

1。默認情況下，作用域爲false，這意味着更改指令中的作用域變量也會更改父級作用域變量，因爲它不會創建新的作用域。

app.directive('mydirective',function() { 
     return{ 
      controller:'LocalCtrl as local', 
      templateUrl: '<div>{{local.content}}</div>', 
     } 
    }); 

scope:true，採用這種將創建在子指令，它從父範圍或父母控制範圍

app.directive('mydirective',function() { 
    return{ 
     scope:true, 
     controller:'LocalCtrl as local', 
     templateUrl: '<div>{{local.content}}</div>', 
    } 
}); 

prototypically繼承新的子範圍

3：scope:{}：隔離範圍，它不從父範圍繼承（可以創建可重複使用的組件/指令）

視圖

<div ng-controller = "mainCtrl "> 
     <my-directive content="mainContent" some-fn="someFn"></my-directive> 
    </div> 


    app.directive('mydirective',function() { 
     return{ 
      scope:{ 
       twoWayConent:'=content',// two way data binding 
       oneWayConent:'@conent', // one way binding 
       someFn:'&someFn' //function binding (2 way) 
      }, 
      controller:'LocalCtrl as local', 
      templateUrl: '<div>{{local.content}}</div>', 
     } 
    }); 

4. using require:：如果你有其他指令一個指令，在指令認定中的對象（DDO）要求，可以用於訪問你的孩子指導家長指令控制器變量和功能爲下面

視圖

<parent-directive> 
     <child-directive></child-directive> 
</parent-directive> 



app.directive('childDirective',function() { 
    return{ 
     require:'^parentDirective' // can be array of parents directive too 
     link:function(scope,element,attrs,parentDirectiveController){ 
       console.log(parentDirectiveController) // can access parent directive controllers instances 
     } 
    } 
});