在Angularjs中，嵌套在指令中的控制器可以設置指令的ng模型嗎？

Question

我有一個使用ng模型控制器的指令，並從它內部的控制器「myController」獲取模型值。我正在使用transclude = true和ng-transclude。這是我希望允許我的同事重複使用的通用指令。我想讓消費者點擊按鈕，並將ngModel值設置爲他們想要的任何值，但基本上總是有一些對象。我如何正確設置？我意識到裏面的指令，我可以調用ngModel。$ setValue或$ setViewValue等...抱歉，我仍然是新的angularjs，特別是指令。我應該在指令中使用控制器嗎？我知道指令的對象定義具有這種能力，但我並不真正知道如何或何時利用它。最後可以將控制器轉換爲指令，就像在「nestedInDirController」中一樣？感謝您提供任何提示，技巧，示例或建議。

jsfiddle here

<div ng-controller="myController"> 
    <div foo-directive="" ng-model="viewModel.foo"> 
     <div ng-controller="nestedInDirController"> 
      <various-controls-in-here /> 
     </div> 
    </div> 
</div> 

angular.module('myApp', []) 
.directive('fooDirective', function(){ 

    var template = '<div><div ng-transclude></div> <button ng-click="someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>'; 
    return { 
     transclude: true, 
     require: '?ngModel', 
     template: template, 
     compile: function(tElement, tAttrs, transclude){ 

     return function(scope, element, attrs, ngModel){ 

     } 
     } 
    }; 
}); 

function myController($scope){ 

    $scope.viewModel = { foo : { bar: 'baz'}}; 
} 

function nestedInDirController($scope){ 


    $scope.someFunc = function(){ 
     alert('I was called'); 
     //how can I set ng-model in foo-directive from this controller? 
    } 

} 

Answer 1

http://jsfiddle.net/jSEba/

這是爲了滿足使用事件發射你的需要的一種方式。

即讓指令$broadcast事件到其子範圍， 使transcluded子範圍可以通過$on趕向 按鈕點擊反應。

angular.module('myApp', []) 
.directive('fooDirective', function(){ 
    var template = '<div><div ng-transclude></div> <button ng-click="someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>'; 
    return { 
     transclude: true, 
     template: template, 
     link: function(scope, elem, attrs) { 
      scope.someFunc = function() { 
       scope.$broadcast('buttonclick', { valname: attrs.fooDirective }); 
      }; 
     } 
    }; 
}); 

function myController($scope){ 
    $scope.viewModel = { foo : { bar: 'baz'}}; 
} 

function nestedInDirController($scope){ 
    $scope.$on('buttonclick', function(event, arg) { 
     $scope.$eval(arg.valname + " = 'new value'"); 
    }); 
} 

雖然我懷疑可能有更好的辦法。

Answer 2

這是在指令和控制器之間使用共享服務的另一種解決方案。

（可以創建更好的服務來執行所需要的數據結構中在該特定情況下，控制器之間共享，一般例如，代替。）

這裏是一個的jsfiddle http://jsfiddle.net/PguFh/15/（少許後我更新寫下面的代碼）。

的index.html

<div ng-controller="myController"> 
    <div foo-directive="" ng-model="viewModel.foo"> 
     <div ng-controller="nestedInDirController"> 
      <pre>{{viewModel.foo|json}}</pre> 
     </div> 
    </div> 
</div> 

app.js

angular.module('myApp', []) 

.factory('Shared', function() { 
    var shared = {}; 

    return { 
     set: function(value) { 
      shared = value; 
     }, 
     get: function() { 
      return shared; 
     } 
    } 
}) 

.directive('fooDirective', function(Shared){ 

    var template = '<div><div ng-transclude></div> <button ng-click="shared.someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>'; 
    return { 
     transclude: true, 
     require: '?ngModel', 
     template: template, 
     compile: function(tElement, tAttrs, transclude){ 

      return function(scope, element, attrs, ngModel) { 
       scope.shared = Shared.get(); 
      } 
     } 
    }; 
}); 

function myController($scope, Shared){ 

    $scope.viewModel = { foo : { bar: 'baz'}}; 
    Shared.set({ 
     viewModel: $scope.viewModel, 
     someFunc: function() { alert('default?'); } 
    }); 
} 

function nestedInDirController($scope, Shared){ 
    var shared = Shared.get(); 
    shared.someFunc = function(){ 
     alert('I was called'); 
     //how can I set ng-model in foo-directive from this controller? 
     shared.viewModel.foo.bar = "baz.modified"; 
    } 

}