Обновление переменной области управления контроллера из директивы

Question

Я хочу создать директиву, которая ведет себя как контейнер, переведя его содержимое. Мой HTML выглядит следующим образом

<test> 
    <input type="text" ng-model="name" /> 
    <button ng-click="alertName()">Alert</button> 
</test> 

контроллера и директивы, как этого

angular.module('app', []) 
    .controller('TestCtrl', function($scope) { 
    $scope.name = 'Eric Cartman'; 

    $scope.alertName = function() { 
     alert($scope.name); 
    }; 
    }) 
    .directive('test', function() { 
    return { 
     restrict: 'E', 
     template: '<div ng-transclude></div>', 
     transclude: true, 
     replace: true, 
     link: function($scope, elem, attr, ctrl) { 

     } 
    }; 
    }); 

При загрузке страницы я вижу «Эрик Картман» в текстовом поле, и когда я нажимаю кнопку «боевой готовности» Я вижу «Эрик Картман "в диалоговом окне. До сих пор все в порядке.

Проблема заключается в том, что я меняю имя в текстовом поле и нажимаю кнопку «Оповещение», все еще предупреждая «Эрик Картман». Где я иду не так?

Here is the Plunker

Answer 1

Это связано с прототипичного наследования областей и связанной переменной будучи «верхний уровень» (т.е. ng-model="name", вместо ng-model="model.name").

Просто оберните значение в объекте:

// controller: 
$scope.model = { name: 'Eric Cartman' }; 
// do not forget the alert! 

Конечно связать его должным образом:

<input type="text" ng-model="model.name" /> 

Прототипом наследство это тема, которая сбивает с толку людей, когда первые подвергаются его воздействию; Я даже не пытался объяснить концепцию здесь, есть много источников в Интернете. Вы можете изучить его или просто поверить мне на слово, и никогда не использовать «верхний уровень» двухсторонних привязок!