다른 컨트롤러를 사용하는 AngularJS 지시문

컨트롤러의 데이터를 사용하는 HTML 템플릿을 출력하는 지시문을 만들려고합니다. sample.js에서다른 컨트롤러를 사용하는 AngularJS 지시문

컨트롤러가 체내에서 생성되기 때문에 내가 모듈, 컨트롤러 및 지침

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

app.controller("MyCtrl", function($scope) { 
    $scope.someProperty = true; 
}) 

app.directive("myElement", function() { 
    return { 
     restrict: "E", 
     scope: {name: "@"}, 
     template: 
      '<div ng-show="someProperty">' + 
      ' <p>This element is called {{name}}</p>' + 
      '</div>', 
     replace : true, 
     transclude : false 
    } 
})

나는 다음과 같은 HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
     <meta charset="UTF-8"> 

     <script type="text/javascript" src="angular.min.js"></script> 
     <script type="text/javascript" src="sample.js"></script> 
    </head> 
    <body ng-controller="MyCtrl"> 
     <div><my-element name="Mark"></my-element></div> 
     <div><my-element name="Vink"></my-element></div> 
    </body> 
</html>

와 요소를 사용하고 있습니다를 추가했습니다 , 나는 child-element가 그것의 속성/메소드를 사용할 수 있기를 기대합니다. 그러나 데이터가 표시되지 않습니다 (데이터보기가 없으면 데이터가 양호합니다).

이 간단한 샘플에서는 HTML의 DOM 요소로 ng-show를 이동할 수 있지만 실제 응용 프로그램에서는 ng-show가 옵션이 아닙니다. 컨트롤러에서 속성 (및 메서드)을 사용할 수 있으려면 내 지시문이 정말로 필요합니다.

이것이 가능합니까? 그리고 그것을 작동 시키려면 무엇을 놓치셨습니까? 당신은 당신이 선언해야 고립 된 범위를 사용하고 있기 때문에

출처

2014-07-17 user3848690

가 someProperty이

app.directive("myElement", function() { 
    return { 
     restrict: "E", 
     scope: { 
      name: "@", 
      someProperty: "=" 
     }, 
     template: 
      '<div ng-show="someProperty">' + 
      ' <p>This element is called {{name}}</p>' + 
      '</div>', 
     replace : true, 
     transclude : false 
    } 
});

처럼 사용하고 당신이 대답에 추가하려면이

<my-element name="Vink" some-property="someProperty"></my-element>

출처

2014-07-17 12:17:20 Edminsson

처럼 사용할 수 있습니다, 이것은에서입니다 "이름에서 알 수 있듯이 지시문의 격리 범위는 명시 적으로 범위 : {} 해시 객체에 추가 한 모델을 제외한 모든 항목을 격리합니다. 재사용 가능한 구성 요소를 만들 때 구성 요소가 모델을 제외한 모델 상태 요 u가 명시 적으로 전달됩니다. " –

다른 컨트롤러를 사용하는 AngularJS 지시문

답변

관련 문제