련 ng 를 클릭하에서 작동하지 않습 ng-그리드

Question

내가 만들기 ASP.net MVC 응용 프로그램에서 나를 표시하는 ng-격자 열의가 있는 링크를 한 콘텐츠입니다.

여기에 내가 어떻게 그것을 달성했다.
컨트롤러(ng-그리드):

columnDefs: [
 { field: 'FreightRules', visible: true, 
    cellTemplate: 
     '<div class="rulesDirective" freight-rules="{{row.entity.FreightItemGuid}}">
          </div>', 
    enableCellEdit: false, enableCellSelection: false }]

Directive:

directives.directive('rulesDirective', function () {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { freightRules: '@freightRules' },
        template: '<div ng-switch on="freightRules | areRulesAvailable">' +
                  '<div ng-switch-when = true><a ng-click="getRulesTest(\'{{freightRules}}\')" href="#addFreightRuleModal">Rules</a></div>' +
                  '<div ng-switch-when = false>No Rules</div>' +
                  '<div ng-switch-default class="grid">Error</div>' +
               '</div>'
        }});

Filter:

filters.filter('areRulesAvailable', function () {
    return function (value) {
        if (value != '00000000-0000-0000-0000-000000000000') {
            result= true;
        }
        else {
            result = false;
        }
        return result;
    };
});

그것은 작동하지만 클릭할 때에 Rules 링크할 수 없을 표시합니다.

을 대화 버튼을 클릭하여 별도로 일했다.도움이 필요합니다!

Answer 1

이 지시어는 절연 범위 (참조하십시오 격리된 범위의 지시어),는 내가 말할 수 있기 때문에 그 선언을 담고 scope: {...}, 지시어로 제한 품목에서는 범위에만 어떤 지시어는 정의한다.

그것이 가능한 지시어를 상속하는 항목에서 상위 범위,또는 동일하게 사용 범위는 부모로,그러나지 않는 경우에.

이 있는 경우 절연된 범위를 정의할 수 있는 유일한 방법이 항목에 해당 범위는 장소들을 거기서 컨트롤러 link 기능,또는 그들을 정의로 범위 옵션 에서 지시문입니다.면,지금 getRulesTest() 은 특정만 지침(지 않을 재사용할 수 있는 바깥에서 정의하지 않은 부모트 컨트롤러 등) 다음 단지 그것을 정의에서 당신의 link 능(또는 지침상의 컨트롤러는 경우 의미가 무엇이든):

directives.directive('rulesDirective', function () {
    return {
        restrict: 'C',
        replace: true,
        transclude: true,
        scope: { freightRules: '@freightRules' },
        link: function($scope) { // looky here
            $scope.getRulesTest = function() {
                 console.log('check me out');
            };
        },
        template: '<div ng-switch on="freightRules | areRulesAvailable">' +
                  '<div ng-switch-when = true><a ng-click="getRulesTest(freightRules)" href="#addFreightRuleModal">Rules</a></div>' +
                  '<div ng-switch-when = false>No Rules</div>' +
                  '<div ng-switch-default class="grid">Error</div>' +
               '</div>'
        }});

때문에 당신은 결코 그것을 정의에 이 지침의 범위는 어느 곳에서 당신의 예에,나는 당신은 그것을 선언하는 부모트 컨트롤러리고 당신이 생각하고 그것은 단지 전화를 이 지침의 범위에서 찾을 상위 범위가 있습니다.위에서 말한 대로 이 작동하지 않습니다.당신이 사용할 수 있는 범위 옵션을하는 바인딩 기능을 사용하여 & 문입니다.이것은 당신의보기 선언적으로 할당하는 기능에서 부모 범위에 대한 당신의 지시어를 사용할 때 호출해야 합니다.

directives.directive('rulesDirective', function() {
  return {
    restrict: 'C',
    replace: true,
    transclude: true,
    scope: {
      freightRules: '=',
      getRulesTest: '&rulesTest' // <- this guy. the text on the left is what you want the item named on the scope locally. the text on the right, after the & is what the attribute on the element should be called. if you want them to be the same on both sides, simply enter '&'
    },
    template: '<div ng-switch on="freightRules | areRulesAvailable">' +
      '<div ng-switch-when="true"><a ng-click="getRulesTest({rules: freightRules})" href="">Rules</a></div>' +
      '<div ng-switch-when="false">No Rules</div>' +
      '<div ng-switch-default class="grid">Error</div>' +
      '</div>'
  };
})

우리가 추가되는 범위 옵션을 scope 선언입니다.지금 부모님 컨트롤러 기능을 추가에 대한 범위를 수밖에 없:

.controller('MyCtrl', function($scope) {
   $scope.doSomethingWithRules = function(rules) {
         console.log('sup?');
   };
});

보 같을 것이다:

<div class="rules-directive" rules-test="doSomethingWithRules(rules)"></div>

다른 것이 문제가 될 수 있는 것은 당신이 무엇을 하고 있는 이 라인에서는 템플릿:

ng-click="getRulesTest(\'{{freightRules}}\')"

당신은 노력하고 전달하는 기능을 평가의 결과 문자열 {{freightRules}} (지 않는 것이 매우 유용한),또는 당신은 그것을 전달하는 실제 freightRules 체(는 가능성이 보인다)?그렇다면,단지 그것을 변경하기:

ng-click="getRulesTest({rules: freightRules})"

편집

여기에는 쿵 와 함께 작동하는 예입니다.

나는 잡은 작은 오류가에서 내 원래는 방법에 대한 답변을 호출 기능 범위 옵션이 있습니다.거기에 몇 가지 방법으로 함수를 호출하는 바에 따라 여부를 매개 변수가 있 어떻게 당신이 그들이 원하는 일치합니다.이 부분입니다.하지 않은 경우 다음과 같은 스 option#2.

1.하려는 그냥 통과하는 이름 의 함수 호출해야 합니다,매개 변수 결정이 고 열.

말 당신은 그들이 원하는 단순히 상태(참고 우리는 단지의 이름을 제공하는 규칙,괄호 또는 매개 변수 이름):

<div class="rules-directive" ... rules-test="doSomethingWithRules">

다음 지시어를 호출해야 하며 함수를 다음과 같이(주는 우리가 부르는 벌거벗은 함수를 생성하는 호출자에 사용할 수 있는 실제로 호출 기능 다음 우리는 그것을 실제 매개 변수):

ng-click="getRulesTest()(rules)"

2.당신이 원하는 호출자에 이름이 인수할 수 있도록 당신의 순서를 변경하거나 생략 매개 변수입니다.

이것은 최고의 그림이 여러 개 있는 경우 매개 변수입니다.말하는 지시어는 두 개의 매개변수 paramA 고 paramB.당신이 함수를 호출에서 지시어를 사용하는 개체를 포함하는 매개 변수 이름과 값입니다.

ng-click="getRulesTest({paramA: valuesForA, paramB: valuesForB })"

다음을 사용할 때 directive,태그를 다음과 같습니다:

<div class="rules-directive" ... rules-test="doSomethingWithRules(paramA, paramB)">

이 것이 좋은 상황에서 당신이 원하는 곳에 다시 정렬하거나 생략에서 매개 변수되는 함수가 호출됩니다.말 doSomethingWithRules 만 paramB.지금 내가 할 수 있습니다:

<div class="rules-directive" ... rules-test="doSomethingWithRules(paramB)">

나는 할 수 없었다는 옵션#1 위,그것 때문에 항상 호출의 모든 매개 변수를 고 열.그래서,옵션#2 이 낫기 때문에 그것은 소비자의 지시어는 더 많은 유연성과 저장하는 것을 기억하기 위해 매개 변수가 공급되는 기능입니다.