В Angularjs может ли контроллер, вложенный внутри директивы, установить ng-модель директивы?

Question

У меня есть директива, которая использует контроллер ng-model и получает его значение модели от контроллера, внутри которого находится «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 события в его ребенка рамки, так, что ребенок сфера включены через можно поймать с помощью $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"; 
    } 

}