Доступ к $ scope из изолированной директивы

Я хочу изменить переменную $ scope из изолированной директивы, как это возможно?

Я попытался использовать синтаксис '@, =, &' в области директивы, но не могу заставить его работать.

Это мой упрощенный код

app.controller('testCtrl', function($scope) { 
    $scope.hello = 'hello'; 
} 

app.directive('testDirective', function() { 
    return { 
     restrict: 'E', 
     template: '<div>{{text}}</div>', 
     scope: {}, 
     link: function(scope, element) { 
      scope.text = 'this is my text'; 
      scope.hello = 'hello world!'; 
     } 
    }; 
});

HTML

<body> 
    {{ hello }} 
    <test-directive /> 
</body>

Это выход я хочу

hello world! 
this is my text

источник

2015-01-04 Inzajt

Вы можете установить require опцию директивы и укажите родительский контроллер. Это позволит передать контроллер к функции связи в качестве последнего аргумента:

app.directive('testDirective', function() { 
    return { 
     restrict: 'E', 
     template: '<div>{{text}}</div>', 
     require: '^testCtrl', 
     scope: {}, 
     link: function(scope, element, attrs, testCtrl) { 
      scope.text = 'this is my text'; 
      testCtrl.setHello('hello world!'); 
     } 
    }; 
});

Примечание Вы должны создать этот testCtrl.setHello() метод на контроллере. Это происходит потому, что вы получаете контроллер сам, а не его впрыскивают объем:

app.controller('testCtrl', function($scope) { 
    $scope.hello = 'hello'; 
    this.setHello = function(newHello) { 
     $scope.hello = newHello; 
    } 
}

Кроме того, если вы на самом деле не волнует строгое соблюдение зависимость контроллера, вы можете получить быстрый доступ к scope.$parent.$parent.hello из вашей директивы.

источник

2015-01-04 10:45:37

Хорошее решение, спасибо! – Inzajt

В HTML, директива должна быть в змеиный корпус:

<test-directive />

В вашем скрипте, директива должна быть определена в ГорбатыйРегистр:

app.directive('testDirective', function() { 
});

Кроме того, добавьте директиву ngController:

<body ng-controller="testCtrl> 
</body>

источник

2015-01-04 10:37:05 pixelbits

Отредактировано что, не помогло в Тхо решения. – Inzajt

Это не решает проблему изолированного объема и изменения родительской области. –

Вот чего не хватало:

нг-контроллер не был определен
@ означает, передавая атрибут как строку = означает связывание собственности имущества из сферы родителя (который является то, что мы необходимо здесь) и & означает передачу функции из области полномочий, которую нужно вызвать позже.
, когда директива называется «testDirective», она выглядит в HTML следующим образом: <test-directive></test-directive> в качестве случаев верблюда в JS должно быть разделено «-» в HTML.

<body ng-controller="testCtrl"> {{ hello }} <test-directive hello-from-parent="hello"></test-directive> </body>

app.directive('testDirective', function() { return { restrict: 'E', scope: { hello: "=helloFromParent" }, template: '<div>{{text}}</div>', link: function(scope, element, attrs) { scope.text = 'this is my text'; scope.hello = 'hello world'; } } });

Я создал рабочую plnkr here

источник

2015-01-04 10:56:46 ilmgb

Также хорошее решение, спасибо! – Inzajt

Доступ к $ scope из изолированной директивы

ответ

Смежные вопросы