AngularJS에서 재사용 가능한 구성 요소 만들기

Question

저는 Stackoverflow를 처음 사용합니다. 저는 AngularJS도 처음입니다. 내가 올바르게 사용하지 않으면 사과드립니다. 그래도 AngularJS로 UI 컨트롤을 만들려고합니다. 내 UI 컨트롤은 다음과 같습니다.

+---------------------+ 
|      | 
+---------------------+ 

예. 텍스트 상자에는 특별한 기능이 있습니다. 단추로 페이지에 넣을 계획입니다. 내 생각은 개발자로서, 나는 이런 식으로 뭔가를 입력 할 것입니다 :

<ul class="list-inline" ng-controller="entryController"> 
    <li><my-text-box data="enteredData" /></li> 
    <li><button class="btn btn-info" ng-click="enterClick();">Enter</button></li> 
</ul> 

주의 사항, 나는 하지 내 컨트롤 버튼을 원하십니까. 또한 자식 컨트롤과 관련된 범위에서 enteredData을 사용할 수있게하려고합니다. 즉, enterClick이 호출되면 $scope.enteredData을 통해 값을 읽을 수 있기를 원합니다. 나는 지금

myApp.directive('myTextBox', [function() { 
    return { 
     restrict:'E', 
     scope: { 
      entered: '=' 
     }, 
     templateUrl: '/templates/myTextBox.html' 
    }; 
}]); 

myApp.controller('myTextBoxController', ['$scope', function($scope) { 
    $scope.doSomething = function($item) { 
     $scope.entered = $item.name; 

     // Need to somehow call to parent scope here. 
    }; 
}]); 

myTextBox.html

<div ng-controller="myTextBoxController"> 
    <input type="text" class="form-control" ng-model="query" placeholder="Please enter..." /> 
</div> 

entryController.js

myApp.controller('entryController', ['$scope', function($scope) { 
    $scope.enteredData = ''; 
    $scope.enterClick = function() { 
    alert($scope.enteredData); 
    }; 
}); 

: my-text-box을 생성하기 위해, 나는 다음과 같은 지침을 구축했습니다 두 가지 문제가있다. entryController에서 enterClick가 호출

1. , $scope.enteredData가 비어 있습니다.
2. doSomething (myTextBoxController)이 호출 될 때, 뭔가 일어 났음을 entryController와 통신하는 방법을 모르겠습니다.

올바르게 지시문을 설정 한 것 같습니다. 내가 뭘 잘못하고 있는지 모르겠다. 누군가 올바른 방향으로 나를 가리켜 주시겠습니까?

Answer 1

세 가지 제안 사항.

1) 다른 곳에 정의 된 컨트롤러를 참조하는 템플릿으로 지시문을 작성하면 안됩니다. 그것은 지시문을 독립적으로 테스트하는 것을 불가능하게 만들고 일반적으로 불분명합니다.해당 데이터에 바인딩 당신의 지시에 격리 범위 개체를 사용하는 부모 범위에서 지시어로 데이터를 전달해야하는 경우 http://jsfiddle.net/p4ztunko/

myApp.directive('myTextBox', [function() { 
    return { 
     restrict: 'E', 
     scope: { 
      data: '=' 
     }, 
     template: '<input type="text" class="form-control" ng-model="data" placeholder="Please enter..." />' 
    }; 
}]); 

myApp.controller('entryController', ['$scope', function ($scope) { 
    $scope.enteredData = 'Stuff'; 
    $scope.enterClick = function() { 
     alert($scope.enteredData); 
    }; 
}]); 

<div> 
    <ul class="list-inline" ng-controller="entryController"> 
     <li>{{enteredData}} 
      <my-text-box data="enteredData" /> 
     </li> 
     <li> 
      <button class="btn btn-info" ng-click="enterClick();">Enter</button> 
     </li> 
    </ul> 
</div> 

2) 돈을 (지시어 템플릿 컨트롤러가없는 방법 참고) 필요하지 않을 때 HTML을 난처하게하지 마십시오. 각도의 목표 중 하나는 마크 업을 읽기 쉽도록 만들고 표준 요소를 임의의 맞춤 요소로 대체하지 않는 것입니다. 예 :) http://jsfiddle.net/Lkz8c5jo/

myApp.directive('myTextBox', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs){ 
      function doSomething (val) { 
       alert('you typed ' + val); 
      } 
      scope.$watch(attrs.ngModel, function (val) { 
       if(val == 'hello'){ 
        doSomething(val); 
       } 
      }); 
     } 
    }; 
}); 

myApp.controller('entryController', ['$scope', function ($scope) { 
    $scope.enteredData = 'Stuff'; 
    $scope.enterClick = function (data) { 
     alert('You clicked ' + data); 
    }; 
}]); 

<div> 
    <ul class="list-inline" ng-controller="entryController"> 
     <li>{{enteredData}} 
      <input type="text" ng-model="enteredData" my-text-box /> 
     </li> 
     <li> 
      <button class="btn btn-info" ng-click="enterClick(enteredData)">Enter</button> 
     </li> 
    </ul> 
</div> 

3 : (여전히 외부 컨트롤러를 참조하지 주) 컨트롤러에 데이터를 전달하면 입력 값을보고 당신은 연결 기능에 그렇게 할 수있는 무엇에 따라 작업을 수행하려면 함수는 ng-click = "enterClick (enteredData)"와 같은 함수에서 $ scope 객체를 참조하는 대신 UI에서 함수를 호출합니다.

$ scope 종속성을 제거하므로 테스트가 더 쉽습니다.

Answer 2

올바른 범위를 사용하지 않아 $ scope.enteredData가 비어 있습니다. entryController의 $ scope는 myTextBoxController와 동일한 $ scope가 아닙니다. 지시어에 이러한 컨트롤러 중 하나를 지정하고 적절한 컨트롤러 범위를 참조 할 때 사용해야합니다.

enterClick 및 해당 버튼을 지시문 템플릿으로 이동해야합니다. 그런 다음 입력 클릭을 텍스트 상자 컨트롤러로 이동하면 $ scope.enteredData를 참조 할 수 있습니다.

$ emit을 사용하여 부모 범위에 변경 사항을 알릴 수 있습니다. (이것은 당신의 코멘트 "// 여기 어떻게 부모 범위를 호출 할 필요가 있습니다.")

또한, 적절한 변수를 사용하지 않는 문제가있을 수 있습니다. myTextBox 지시문에서 $ scope.entered를 선언하지만 실제로 $ scope.data를 html의 enteredData 값과 동일하게 설정합니다.