Question

我很好奇是否有可能在指令中注入一个值＆＃39;近距离。我无法在angularjs文档中找到任何相关内容，所以我尝试了一些东西。有没有人知道是否有更优雅的方法来解决这个问题？

到目前为止我的方法：

app.directive('injectIntoScopeDirective', function(){
  return {
    restrict: 'E',
    scope: {},
    templateUrl: 'inject.tpl.html',
    link: function(scope, elem, attrs){

      angular.forEach(attrs, function(val, attr){
        // variables which should be injected must be prefixed with the inject keyword
        var match = attr.match(/^inject(.*)/);

        if( match !== null && match.length > 1 ){
          scope['injected' + match[1].toLowerCase()] = val
        }
      });
    }
  }
});

这是一个有效的plunk

使用bindToController属性的新方法。更干净。

app.directive('injectIntoScopeDirective', function(){
  return {
    restrict: 'E',
    scope: {},
    controller: function(){

    },
    bindToController: {
      inject: '=' // allows us to bind an object to the directive controller
    },
    controllerAs: 'injectCtrl',
    templateUrl: 'inject.tpl.html'
    // no linking function needed
  }
});

使用bindToController属性更新plunk

Answer 1

我会使用指令的隔离范围：

<inject-into-scope-directive inject-foo="'i am foo'" inject-bar="'hello from bar'" some-other-attribute="'hello there'"></inject-into-scope-directive>

使用：

app.directive('injectIntoScopeDirective', function(){
  return {
    restrict: 'E',
    scope: {
      injectedfoo:'=injectFoo',
      injectedbar:'=injectBar'
    },
    templateUrl: 'inject.tpl.html',
    link: function(scope, elem, attrs){
    }
  }
});

Angular说：

目的是将指令范围与范围分开在外部，然后将外部范围映射到指令的内部范围。我们可以通过创建我们称之为隔离范围的方式来实现。要做到这一点，我们可以使用指令的范围选项。

https://docs.angularjs.org/guide/directive

Answer 2

在范围声明中使用@attr：

scope: {injectedfoo:'@', injectedbar:'@'},

它绑定到指令html属性。

Isolating the Scope of a Directive

Plunk

Answer 3

如上所述，我认为如果你需要在指令中注入匿名变量，那么在指令上使用bindToController属性是最干净的解决方案。

app.directive('injectIntoScopeDirective', function(){
  return {
    restrict: 'E',
    scope: {},
    controller: function(){

    },
    bindToController: {
      inject: '=' // allows us to bind an object to the directive controller
    },
    controllerAs: 'injectCtrl',
    templateUrl: 'inject.tpl.html'
    // no linking function needed
  }
});

工作plunk

将匿名值注入闭合指令范围

3 个答案: