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

В моем проекте я хочу получить доступ к $ -области контроллера, но, поскольку моя область видимости находится внутри директивы, используется $ scope директивы ,Область действия директивы используется вместо области действия контроллера

Вот отличный пример того, что произошло. http://codepen.io/anon/pen/zrmeZw?editors=1010

Если я заменяю <card-panel> тегами <div>, все в порядке. Но с тегом <card-panel>, $ scope используется, если область видимости на карте, а не область my-controller $.

Javascript

app = angular.module('BlankApp', ['ngMaterial']); 

app.directive('cardPanel', function() { 
    return { 
    transclude: true, 
    template: '<div style="background:#fff" layout-margin layout-padding><div ng-transclude></div></div>', 
    restrict: 'E', 
    link: function (scope, element, attrs) { 
    } 
    }; 
}); 

app.controller('MyController', function($scope) { 
    $scope.myContent = ''; 

    $scope.onChangeListener = function() { 
    console.log($scope.myContent); 
    console.log("toto"); 
    } 


});

HTML

<body ng-app="BlankApp" ng-cloak style="background:#f1f1f1" layout> 
<div ng-controller="MyController"> 
    <card-panel layout-margin> 
    <h1>MyDemo</h1> 

    <md-input-container class="md-block"> 
     <label> demo </label> 
     <input ng-change="onChangeListener()" ng-model="myContent"> </input> 
    </md-input-contanier> 
    </card-panelr>  
    </div> 
</div> 


    <!-- Angular Material requires Angular.js Libraries --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> 

    <!-- Angular Material Library --> 
    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> 

</body> 

</html>

Ok я могу сделать?

Спасибо

источник

2016-02-07 Epitouille

Я попытался решить эту проблему с помощью контроллера в синтаксисе. С синтаксисом controllerAs нет путаницы в области.

Здесь работает code

<div ng-controller="MyController as myctrl"> 
 
    <card-panel layout-margin> 
 
    <h1>MyDemo</h1> 
 
    
 
    <md-input-container class="md-block"> 
 
     <label> demo </label> 
 
     
 
     <input ng-change="myctrl.onChangeListener()" ng-model="myctrl.myContent"/> 
 
    </md-input-contanier> 
 
    </card-panelr>  
 
    </div> 
 
</div>

app.controller('MyController', function($scope) { 
 
    var vm = this; 
 
    vm.myContent = ''; 
 
    
 
    vm.onChangeListener = function() { 
 
    
 
    console.log(vm.myContent); 
 
    console.log("toto"); 
 
    
 
    } 
 
    
 
    
 
});

источник

2016-02-07 16:23:16 chaoticmind

Пожалуйста, обратитесь к https://github.com/angular/angular.js/wiki/Understanding-Scopes

Что происходит, так это то, что дочерняя область получает свое собственное свойство, которое скрывает/затеняет родительское свойство с тем же именем. Это не что-то AngularJS делает - так работает JavaScript prototypal наследование работает.

Смотрите обновленный code pen

Я изменил scope.mycontent = 'текст' в scope.mycontent = {Вэл: 'текст'}.

app.controller('MyController', function($scope) { 
    $scope.myContent = {val: ''}; 

    $scope.onChangeListener = function() { 
    console.log($scope.myContent.val); 
    console.log("toto"); 
    } 
});

источник

2016-02-07 16:27:25 7alcon

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

ответ

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