есть проблемы с пониманием angularjs компонентов.Только используемые директивы перед - PullRequest
0 голосов
/ 30 сентября 2018

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

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

  1. (первый вопрос) Я использовал $ scope для всего.Теперь, когда я читаю по компоненту, я вижу, что $ ctrl используется везде, в чем разница?

app.js

var myApp= angular.module('bigMoveApp', ['ngRoute', 'testerModule']);

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.

    when('/', {
        templateUrl: 'app/Views/main.html',
        controller: 'ctrlMain'
    }).

    otherwise({
        redirectTo: '/'
    });

}]);

ctrlMain.js

myApp.controller('ctrlMain', ['$scope', function ($scope) {
 //code
     $scope.paragraphToWrite = { text: "let's write something" };
 //code
}])

main.html

<div id="main-body-wrapper">
<...>
    <paragraph-Component obj="paragraphToWrite"></paragraph-Component>
 <...>
</div>

paraComponent.js

    function paragraphController($scope, $element, $attrs) {
        var ctrl = this;
        ctrl.user = $scope.$parent.textFields.whatWeDo.title;
        var x = ctrl.obj;
    } 


    myApp.component('paragraphComponent', {
        templateUrl: '/app/Views/paragraphCom.html',
        bindings: {
            obj : '='
        },  
        controller: paragraphController 
    })
(второй вопрос), что я здесь не так делаю, я даже не могу передать простой объект компоненту

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

1 Ответ

0 голосов
/ 30 сентября 2018

Не волнуйтесь, ничего нового.API компонента AngularJS - это , просто оболочка вокруг директивы API .За кулисами создается директива, когда вы используете .component API.Эти изменения были введены, чтобы сделать переход AngularJS на версию Angular (2+) более плавным.Читаемость API также будет выглядеть аналогично, поскольку Angular полностью основан на component.

Возвращаясь к вашим вопросам

  1. Когда вы используете шаблон controllerAs при определении контроллера, всезначение привязки находится внутри вашей переменной $scope.controllerAlias.В конце концов, если вы увидите, что там в псевдониме, вы увидите, что this (context) там точно заполнен.Там вы не должны использовать $scope внутри контроллера, скорее всего внутри вашего контроллера будет находиться функция this, которая является не чем иным, как $ctrl псевдонимом контроллера по умолчанию.
  2. У вас была опечатка при использовании имени компонента.paragraph-Component тег должен быть paragraph-component

    <paragraph-component obj="paragraphToWrite"></paragraph-component>
    
...