发行具有角手风琴范围手风琴、范围、有角

2023-09-13 04:38:58 作者:Crazy‖°疯掉记忆

我有一个称为指令模板中,code为模板,就像下文。

I am having a directive called templates, the code for templates is like below.

    var templates = function($compile,$parse){
var directive = {
  restrict: 'EA',
  replace: true,
  link: link
};
return directive;

function link(scope, element, attrs) {
 scope.name = "testName";
  var isHtmlCompiled = false;
}
};
 angular.module('templateModules', [])
.directive('templates', templates);

这是主要用于编译HTML code和显示它。但是为了更好地理解我不使用它的例子,目的问题。在app.js文件是像下面

This is mainly used for compiling html code and displaying it.But for the better understanding of the question I am not using it for that purpose in the example. The app.js file is like below

angular.module('ui.bootstrap.demo', ['ui.bootstrap','templateModules']);
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;

  $scope.groups = [
    {
      title: 'Dynamic Group Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: 'Dynamic Group Header - 2',
      content: 'Dynamic Group Body - 2'
    }
  ];

  $scope.items = ['Item 1', 'Item 2', 'Item 3'];

  $scope.addItem = function() {
    var newItemNo = $scope.items.length + 1;
    $scope.items.push('Item ' + newItemNo);
  };

 $scope.add = function(){
     alert($scope.name);
 }

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };
});

中的index.html使用像下面的手风琴。

The index.html is using an accordion like below.

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <script src="app.js"></script>
      <script src="template.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AccordionDemoCtrl">

  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
      This content is straight in the template.
    </accordion-group>
  </accordion>
  <accordion close-others="oneAtATime">
       <accordion-group heading="DYnamic" is-open="status.open" is-disabled="status.isFirstDisabled">
      <div templates="something"></div>
  <button ng-click="add()">Add</button>
    </accordion-group>
  </accordion>

</div>
  </body>
</html>

我现在面临的问题是,我不能够从AccordionDemoCtrl模板得到scope.name的价值。有没有什么办法让在AccordionDemoCtrl价值?

The problem I am facing is that I am not able to get the value of scope.name from template in the AccordionDemoCtrl. Is there any way to get that value in the AccordionDemoCtrl ?

推荐答案

您应该能够从 AccordionDemoCtrl 。因为你的指令有范围:假并设置 scope.name 中的纽带作用,就像这里的简化演示: 的jsfiddle 。

You should be able to access the name property from AccordionDemoCtrl. Because your directive has scope: false and set scope.name in the link function, just like the simplified demo here: JSFiddle.

下面是一个工作演示从你的例子修改: Plunker (用双向绑定)。

Here is a working demo modified from your example: Plunker (using two-way binding).

说明

该指令手风琴没有定义范围 ,所以它的范围是从外部控制器之一。 transclude:真正的使角创建指令子作用域模板。但由于名称于外部控制器是一种基本类型,设置模板将创建一个新的名称对孩子的范围。见工作演示:的jsfiddle 。图:

The directive accordion doesn't define scope, so its scope is the one from outside controller. transclude:true makes Angular create a child scope for directive template. But since the name on outside controller is a primitive type, setting the value inside template will create a new name on the child scope. See the working demo: JSFiddle. The illustration:

如果使用对象,而不是原始的,这是工作(的jsfiddle )。

If use an object instead of a primitive, it is working (JSFiddle).

有关详细信息:了解作用域

看来,最好是使用双向绑定指令和外部控制器之间的通信。

It seems better to use two-way binding to communicate between directive and outside controller.

下面是一个工作演示: Plunker

Here is a working demo: Plunker