Область ограничения угловой привязки для области управления

Question

Я создаю функцию забытого пароля для приложения, которое я создаю, и поэтому я построил функцию, которая отправляет запрос $ http на ресурс PHP, который отправляет пользователю сообщение об ошибке. Когда запрос решает, чем я показываю твитер bootstrp modal, используя угловую директиву, которая сообщает пользователю, если их электронная почта была успешно отправлена ​​или нет.

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

Мой контроллер:

angular 
     .module('enigma.auth') 
     .controller('Auth', Auth); 

    Auth.$inject = ['authFactory']; 

    function Auth(authFactory) { 
     var auth = this; 
     auth.forgotPassword = forgotPassword; 
     auth.forgotPasswordFeedback = ''; 

     function forgotPassword(email) { 
       if(email) { 
        authFactory.forgotPassword({ email: email }) 
          .then(function(res) { 
           auth.forgotPasswordFeedback = res.message; // auth.forgotPasswordFeedback is set to the correct value now, however this isn't reflected in the directive. 
           $('#forgotPassword').modal(); 
          }); 
       } 
     }; 
    } 

Моя директива:

angular 
     .module('enigma.forgotPasswordDirective', [])  
     .directive('forgotPasswordDirective', forgotPasswordDirective); 

    function forgotPasswordDirective() { 
     return {  
       bindToController: true, // I thought this told the directive to use the controllers scope instead of an isolated scope... 
       controller: 'Auth', 
       controllerAs: 'auth', 
       templateUrl: 'modules/auth/forgotPassword.html' 
     } 
    } 

Шаблон:

<div class='modal fade' id='forgotPassword'> 
    <div class='modal-dialog'> 
     <div class='modal-content'> 
      <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button> 
      <div class='row'> 
       <div class='col-xs-12'> 
        <h3>Password Recovery</h3> 
        <p> 
         {{auth.forgotPasswordFeedback}} <!-- this value is never updated :(--> 
        </p> 
        <p> 
         <button class='btn btn-primary' data-dismiss='modal'>Close</button> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Наконец я это все включено в моем шаблоне регистрации, которая связана с регистрацией контроллер (Примечание. Не забывайте, что директива забытого пароля привязана к контроллеру auth), здесь ' s соответствующие биты.

<div class='form-group'> 
    <label for='email'>Email:</label> 
    <input class='form-control' name='email' ng-model='reg.user.email' required type='email' ng-blur='reg.alreadyRegistered()' /> 
    <div ng-messages='reg.regForm.email.$error' ng-if='reg.regForm.email.$dirty'>      
     <div class='error' ng-message='userExists'>This user already exists. <a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password' ng-controller='Auth as auth'>Forgot password?</a></div> 
    </div> 
</div> 
... 
<forgot-password-directive></forgot-password-directive> 

Answer 1

Он работает, например, если вы заключаете директиву внутри контроллера:

<div ng-controller='Auth as auth'> 
    <div class='form-group'> 
     ... 
     <a href='#' ng-click='auth.forgotPassword(reg.user.email)' title='Forgot password'>Forgot password?</a> 
    </div> 
    <forgot-password-directive></forgot-password-directive> 
</div> 

Однако, кроме того, я хотел бы использовать более простой подход и определить директиву followingly:

function forgotPasswordDirective() { 
    return {  
     scope: false, 
     templateUrl: 'modules/auth/forgotPassword.html' 
    } 
} 

Если вы знакомы с узлом, вы можете клонировать и запускать пример отсюда: https://github.com/masa67/NgBind.