[javascript] 작성시 매개 변수를 AngularJS 컨트롤러에 전달할 수 있습니까?

보기는 구성을 지시해서는 안됩니다

Angular에서 템플릿은 구성을 지시해서는 안되며, 이는 본질적으로 사람들이 템플릿 파일에서 컨트롤러에 인수를 전달하려고 할 때 원하는 것입니다. 미끄러운 경사가됩니다. 구성 설정이 지시문 또는 제어기 인수 속성과 같은 템플리트에 하드 코딩 된 경우 해당 템플리트를 더 이상 단일 용도 이외의 용도로 재사용 할 수 없습니다. 곧 해당 템플릿을 재사용하고 싶지만 구성이 다르므로 이제 템플릿을 사전 처리하여 변수가 각도에 전달되기 전에 변수를 주입하거나 거대한 지시문을 사용하여 거대하게 뱉어냅니다. 래퍼 div 및 인수를 제외하고 모든 컨트롤러 HTML을 재사용하십시오. 소규모 프로젝트의 경우 큰 문제가 아닙니다. 큰 것 (각도가 뛰어남)의 경우 추악합니다.

대안 : 모듈

이러한 유형의 구성은 모듈이 처리하도록 설계된 것입니다. 많은 앵귤러 튜토리얼에서 사람들은 전체 응용 프로그램을위한 단일 모듈을 가지고 있지만 실제로 시스템은 전체 응용 프로그램의 작은 조각을 포장하는 많은 작은 모듈을 설계하고 완벽하게 지원합니다. 이상적으로 컨트롤러, 모듈 등은 별도의 파일로 선언되어 재사용 가능한 특정 청크로 묶여 있습니다. 응용 프로그램이 이런 식으로 설계되면 쉬운 컨트롤러 인수 외에도 많은 재사용이 가능합니다.

아래 예에는 2 개의 모듈이 있으며 동일한 컨트롤러를 재사용하지만 각각 고유 한 구성 설정이 있습니다. 해당 구성 설정은을 사용하여 종속성 주입을 통해 전달됩니다 module.value. 생성자 의존성 주입, 재사용 가능한 컨트롤러 코드, 재사용 가능한 컨트롤러 템플릿 (ng-include에 컨트롤러 div를 쉽게 포함 할 수 있음), HTML없이 단위 테스트 가능한 시스템, 마지막으로 재사용 할 수 있기 때문에 이것은 각도 방식을 준수합니다 조각을 함께 바느질하는 차량으로 모듈.

예를 들면 다음과 같습니다.

<!-- index.html -->
<div id="module1">
    <div ng-controller="MyCtrl">
        <div>{{foo}}</div>
    </div>
</div>
<div id="module2">
    <div ng-controller="MyCtrl">
        <div>{{foo}}</div>
    </div>
</div>
<script>
    // part of this template, or a JS file designed to be used with this template
    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById("module1"), ["module1"]);
        angular.bootstrap(document.getElementById("module2"), ["module2"]);
    });
</script>

<!-- scripts which will likely in be in their seperate files -->
<script>
    // MyCtrl.js
    var MyCtrl = function($scope, foo) {
    $scope.foo = foo;
    }

    MyCtrl.$inject = ["$scope", "foo"];

    // Module1.js
    var module1 = angular.module('module1', []);
    module1.value("foo", "fooValue1");
    module1.controller("MyCtrl", MyCtrl);

    // Module2.js file
    var module2 = angular.module('module2', []);
    module2.value("foo", "fooValue2");
    module2.controller("MyCtrl", MyCtrl);
</script>

실제 동작 : jsFiddle 참조 .

답변

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:type/:id', {templateUrl: 'myView.html', controller: 'myCtrl'});
}]);

app.factory('MyElements', ['$resource', function($resource) {
     return $resource('url/to/json/:type/:id', { type:'@type', id:'@id' });
}]);

app.controller('MyCtrl', ['$scope', '$routeParams', 'MyElements', function($scope, $routeParams, MyElements) {
    MyElements.get({'type': $routeParams.type, "id": $routeParams.id }, function(elm) {
        $scope.elm = elm;
    })
}]);

var app = angular.module('myApp', []);
app.directive('initData', function($parse) {
    return function(scope, element, attrs) {
        //modify scope
        var model = $parse(attrs.initData);
        model(scope);
    };
});

function Ctrl1($scope) {
    //should be defined
    $scope.inputdata = {foo:"east", bar:"west"};
}

<div ng-controller="Ctrl1">
    <div init-data="inputdata.foo=123; inputdata.bar=321"></div>
</div>

angular.module('myModule').directive('user', function ($filter) {
  return {
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + attrs.userId);
    }
  };
});

<user user-id="{% id %}"></user>

angular.module('myModule').directive('user', function ($filter) {
  return {
    scope: {
      userId: '@'
    },
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + scope.userId);
    }
  };
});

<user user-id="{% id %}"></user>