0

I have deep understanding with angular, and I can't understanding what I do wrong.

I have a directive surrounded by ng-controller.

 KApp.directive("testdirective", function ($compile)
    {
        return {
            restrict: 'E',
            transclude: true,
            scope: {
                test:"="
            },
            template: "<div>\
                           <div style='width:120px'>\
                           {{test}}\
                            </div>\
                            <div  ng-transclude>\
                          </div>\
                       </div>"
              };
    });


  KApp.controller('testCtrl', function ($scope)
    {

         $scope.someText ="not important"

         $scope.pass = "1234";

         $scope.showPass = function()
          {
            //why the $scope.pass not updated via ng-model???
           alert($scope.pass)
         }


    });

HTML

<body ng-app="mainModule" ng-controller="appCtrl">
<div ng-controller="tsetCtrl">
 <testdirective  test="someText">
    <button style='width:120px' ng-click='showPass()'>
     Click me
            </button>
         <input ng-model='pass' style='width:120px'>
 </testdirective>
</div>

The ng-model="pass" bind to $scope.pass = "1234"; and it should be updated by the user.

My problem:

The $scope.pass does not updated by the view, why?

Here is the full demo - http://plnkr.co/edit/MsKm0LZtlQ45Yyq5Uw0d?p=preview
Just click on "click me" button and see the result.

cheziHoyzer
  • 4,803
  • 12
  • 54
  • 81

1 Answers1

1

showPass() and ng-model refer to different scopes after the value of input has changed. Please see this SO answer for deeper explanation.

Community
  • 1
  • 1
Kate Miháliková
  • 2,035
  • 15
  • 21
  • Value 1234 is primitive, so there is second `pass` created in inner scope which overrides 1234 value from outer scope (= controller). Please give it a try. – Kate Miháliková Nov 20 '14 at 16:51