angularjs: использовать для параметра scope функции link, чтобы получить свойство родительского контроллера

В моем приложении я столкнулся с одной проблемой, и я отнес ее к простейшему случаю, как показано ниже.
angularjs: использовать для параметра scope функции link, чтобы получить свойство родительского контроллера

<body ng-controller="MainCtrl"> 
    <input type="text" ng-model="color" placeholder="Enter a color"/> 
    <input type="text" ng-model="name" placeholder="Enter a name"/> 
    <hello-world/> 
</body> 

app.directive('helloWorld',function(){ 
    return{ 
     restrict: 'AE', 
     replace: true, 
     template: '<p style="background-color:{{color}}">Hello World</p>', 
     link: function(scope,elem,attrs){ 
      elem.bind('click',function(){ 
       elem.css('background-color','white'); 
       scope.$apply(function(){ 
        scope.color="white"; 
       }); 
      }); 
      elem.bind('mouseover',function(){ 
       elem.css('cursor','pointer'); 
       console.log(scope.name); 
      }); 
     } 
     } 
    });

В приведенном выше случае, я могу получить name и color свойство от контроллера MainCtrl. Демонстрационная здесь: http://plnkr.co/edit/yrljsddgTtkAo0sZVjgf?p=preview

Но в моем реальном проекте, мое использование около контроллера немного отличается следующим образом:

<body ng-controller="MainCtrl as main"> 
    <input type="text" ng-model="main.color" placeholder="Enter a color"/> 
    <input type="text" ng-model="main.name" placeholder="Enter a name"/> 
    <hello-world/> 
</body>

Я обычно использую as метод, как показано выше.
Но в данном случае я не знаю, как получить доступ к свойству в link функции через scope arguments.The демо здесь http://plnkr.co/edit/wnnWyRztZTounSyemPze?p=preview
В настоящее время scope.name не определен.
Значит, любая помощь?

источник

2017-01-17 Chris Bao

демо ссылка была обновлена –

В соответствии с Вашим plunkr, Вы должны сделать это scope.main.name и scope.main.color т.е.

index.html

<body ng-controller="MainCtrl as main"> 
    <input type="text" ng-model="main.color" placeholder="Enter a color"/> 
    <input type="text" ng-model="main.name" placeholder="Enter a name"/> 
    <hello-world/> 
    </body>

скрипт

var app = angular.module('myapp', []); 

app.controller('MainCtrl', function($scope) { 

}); 

app.directive('helloWorld',function(){ 
    return{ 
    restrict: 'AE', 
    replace: true, 
    template: '<p style="background-color:{{main.color}}">Hello World</p>', 
    link: function(scope,elem,attrs){ 
     elem.bind('click',function(){ 
     elem.css('background-color','white'); 
     scope.$apply(function(){ 
      scope.main.color="white"; 
     }); 
     }); 
     elem.bind('mouseover',function(){ 
     console.log(scope.main.name); 
     console.log(scope.main.color); 
     }); 
    } 
    } 
});

Проверить функция elem.bind для изменения

источник

2017-01-17 11:01:55 M3ghana

Благодарим за быстрое решение. Это работает хорошо. –

Приятно слышать :) Пожалуйста, отметьте мой ответ правильно – M3ghana

angularjs: использовать для параметра scope функции link, чтобы получить свойство родительского контроллера

ответ

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