programing

각 지시어에 자체 컨트롤러가 필요합니까?

iphone6s 2023. 9. 24. 12:32
반응형

각 지시어에 자체 컨트롤러가 필요합니까?

간단한 질문인데 관련된 문서를 찾을 수가 없네요...

각진 지시문이 부모 지시문뿐만 아니라 자신의 지시문도 물려받을 수 있는지 알아보려고 합니다.다음과 같은 예를 생각해 봅니다.

자체 상속에서 단순 상속

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    },
    link: function($scope, el, attrs, ctrl) {
        // ctrl now contains `doSomething`
    }
  }
});

부모로부터의 상속

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: '^screen',
    link: function($scope, el, attrs, ctrl) {
        // ctrl now contains `doSomething` -- inherited from the `screen` directive
    }
  }
});

심지어 다중 상속도 있고요

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: ['^screen','^anotherParent'],
    link: function($scope, el, attrs, ctrl) {
        // ctrl[0] now contains `doSomething` -- inherited from the `screen` directive
        // ctrl[1] now contains the controller inherited from `anotherParent`
    }
  }
});

지시가 부모 컨트롤러와 자신의 명령을 모두 상속하도록 하는 방법이 무엇인지 알 수 없습니다.이와 같습니다.

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: '^screen',
    controller: function($scope) {
       // isolated widget controller
    },
    link: function($scope, el, attrs, ctrl) {
        // I need the `screen` controller in ADDITION to the isolated widget controller accessible in the link
    }
  }
});

이것이 가능한/적절한 형태인가요? (아니면 제가 모르는 일종의 안티패턴인가요?)

제가 생각했던 것보다 훨씬 더 명백한 것으로 드러났는데요.약간의 시행착오는 지시가 실제로 필요할 수 있다는 것을 보여주었습니다.

상위 + 로컬 컨트롤러를 상속하는 적절한 방법은 다음과 같습니다.

app.directive('screen', function() {
  return {
    scope: true,
    controller: function() {
        this.doSomething = function() {

        };
    }
  }
});
app.directive('widget', function() {
  return {
    scope: true,
    require: ['^screen','widget'],
    controller: function($scope) {
       this.widgetDoSomething = function() {
       };
    },
    link: function($scope, el, attrs, ctrl) {
        // ctrl[0] contains the `screen` controller
        // ctrl[1] contains the local `widget` controller
    }
  }
});

언급URL : https://stackoverflow.com/questions/24925502/can-an-angular-directive-require-its-own-controller

반응형