Fatal编程技术网
  • angularjs/
  • Angularjs 具有隔离作用域和添加属性的指令，内部指令不可用

Angularjs 具有隔离作用域和添加属性的指令，内部指令不可用

angularjs

Angularjs 具有隔离作用域和添加属性的指令，内部指令不可用,angularjs,Angularjs,我希望有一个具有独立作用域的指令，并在该指令中为此作用域设置属性。即创建一些环境变量，这些变量将由其中的其他指令显示，如下所示： HTML: 但它不起作用。这是。 如果我移除隔离，它工作正常。我做错了什么？这是一个转换的问题吗？如果我在“environment”指令中使用模板，这似乎是可行的，但这不是我想要的 谢谢你的帮助 编辑：我看到同样的问题得到了回答。建议的解决方案是使用控制器而不是指令。我想使用指令的原因是可以在内部指令中使用'require'，我想这是ngController无法做到的

我希望有一个具有独立作用域的指令，并在该指令中为此作用域设置属性。即创建一些环境变量，这些变量将由其中的其他指令显示，如下所示：

HTML:

但它不起作用。这是。 如果我移除隔离，它工作正常。我做错了什么？这是一个转换的问题吗？如果我在“environment”指令中使用模板，这似乎是可行的，但这不是我想要的

谢谢你的帮助

编辑：我看到同样的问题得到了回答。建议的解决方案是使用控制器而不是指令。我想使用指令的原因是可以在内部指令中使用'require'，我想这是ngController无法做到的。

我对您的 当您在指令的作用域上创建变量时，其他指令可以通过两种方式（在plunker中显示）直接或通过双向数据绑定访问它

HTML: 

{{env.value}}
#添加以显示双向数据绑定工作
#更改了传递变量的属性的名称，然后将其显示在指令模板中
{{env.value}}#env.value来自环境指令，而不是display2
JS 角度模块（“测试”，[]） .指令（“环境”，功能（）{ 返回{ 限制：“A”， scope:true，#从{}更改为true，每个环境指令将具有独立的作用域 链接：功能（范围）{ scope.env={ 值：“从指令内部设置的属性” }; } }; }) .directive（“display1”，function（）{ 返回{ 限制：“A”， 模板：“”，#为使用传递变量的指令添加了模板，注意：ng bind中的点，如果您尝试双向数据绑定，但没有点，则说明您做错了（Misko Hevry words） 范围：{ 信息：'='#为传入'info'属性的环境指令中的变量设置双向数据绑定 }，#删除了不必要的变量表 }; }) .directive（“display2”，function（）{ 返回{/*…*/}； });
通过引入外部模板，我设法找到了解决您问题的有效方法。 我很确定你设置它的方式在某个时候起了作用，但我不能确定什么时候。上一次我构建指令不依赖外部标记文件时，我甚至不知道

在任何情况下，如果您愿意为您的指令引入单独的模板，以下内容都应该有效：

app.directive('environment', function () {
    return {
        restrict: 'A',
        templateUrl: 'env.html',
        replace: true,
        scope: {},
        link: function (scope, el, attrs) {
            scope.env = {
              value: "property set from inside the directive"
            };
        }
    };
});

app.directive('display1', function () {
    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        templateUrl: 'display1.html',
        replace: false,
        link: function(scope) {
            // console.log(scope.data);
        }
    };
});
然后对于您的标记（实际上，这些标记不会放在
标记中，您很可能会有一个外部模板，但这只是从我设置的fiddle中获取的）

以及标记：

<div environment> {{env.value}} </div>

{{env.value}
小提琴：

你想说什么就说什么，但它确实起了作用

，概述您的问题以及不“支持”的原因

刚才问了一个类似的问题，答案应该对你有帮助：@MarcKline:谢谢，我刚刚看到了（尽管我花了一些时间搜索：-\）。我用这种方式编辑了我的帖子。我没有看到管理员的建议，但也许我应该特别赞同。这是你的一把叉子来演示：@MarcKline:我不知道如果你的回答中没有周围的NGC控制器，这是可能的。这意味着隔离范围已经应用于调用指令的标记中。。。看起来像是一个黑客，但它完成了任务。我认为在示例中设置控制器只是为了显示值来自指令的作用域，而不是控制器的作用域。OP说如果我移除隔离，但它工作正常。这表明他们尝试了元素上的
scope:true
，但这不是一个适合他们的解决方案。 
<body ng-app="test">
  <div environment>
    {{ env.value }}
    <div display1 data="env"></div>
    <div display2 data="env"></div>
  </div>
</body>
  <input type="text" ng-model="env.value"> #added to show two-way data binding work
  <div display1 info="env"></div> #changed name of attribute where variable is passed, it's then displayed inside directive template
  <div display2>{{env.value}}</div> #env.value comes from environment directive not from display2
</div>

angular.module("test", [])
  .directive("environment", function() {
    return {
      restrict: 'A',
      scope: true, #changed from {} to true, each environment directive will have isolated scope
      link: function(scope) {
        scope.env = {
          value: "property set from inside the directive"
        };
      }
    };
  })
  .directive("display1", function() {
    return  {
      restrict: 'A',
      template: '<span ng-bind="info.value"></span>', #added template for directive which uses passed variable, NOTE: dot in ng-bind, if you try a two-way databinding and you don't have a dot you are doing something wrong (Misko Hevry words)
      scope: {
        info: '=' #set two-way data binding for variable from environment directive passed in 'info' attribute
      }, #removed unnecessary watch for variable
    };
  })
  .directive("display2", function() {
    return {/* ... */};
  });

app.directive('environment', function () {
    return {
        restrict: 'A',
        templateUrl: 'env.html',
        replace: true,
        scope: {},
        link: function (scope, el, attrs) {
            scope.env = {
              value: "property set from inside the directive"
            };
        }
    };
});

app.directive('display1', function () {
    return {
        restrict: 'A',
        scope: {
            data: '='
        },
        templateUrl: 'display1.html',
        replace: false,
        link: function(scope) {
            // console.log(scope.data);
        }
    };
});

<script type="text/ng-template" id="display1.html">
    <span>Display1 is: {{data}}</span>
</script>

<script type="text/ng-template" id="env.html">
    <div>
        <h1>env.value is: {{env.value}}</h1>
        <span display1 data="env.value"></span>        
    </div>
</script>

<div>
    <div environment></div>
</div>

app.directive('environment', function () {
    return {
        restrict: 'A',
        template: function (element, attrs) {
          return element.html();
        },
        scope: {},
        link: function (scope, el, attrs) {
          scope.env = {
            value: "property set from inside the directive"
          };
        }
    };
});

<div environment> {{env.value}} </div>