如何在angularjs中动态绑定指令? [英] how to dynamically bind a directive in angularjs?

问题描述

我有一条指令，该指令需要显示控制器中某个对象的数据.必须显示的数据是由指令的属性以及基于其他dom元素的一些其他计算所确定的.

这是一个简化的示例.

我有以下数据:

app.controller('EditorCtrl', function($scope) {
    $scope.blocks = {
        header: 'text1',
        body: 'text2',  
    };
});

我希望使用此指令显示它:

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            val = data;
        }
    }
});

在HTML中:

<h1 editable="header">text1 should be displayed here</h1>
<h1 editable="body">text2 should be displayed here</h1>

我该如何完成?我是否以正确的方式解决了这个问题?

解决方案

指令中的'data:{{val}}'指令期望在范围内定义"val"(并且不是).

您可以使用"scope:true"创建一个本地作用域来保存val变量. (请参见 http://docs.angularjs.org/guide/directive 范围部分).

类似的事情会起作用:

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        scope: true,
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            scope.val = data;
        }
    }
});

在AngularJS中，子作用域原型地继承自其父作用域，因此，即使您正在创建新作用域，您仍然可以访问blocks对象.

前面已经说过，以前的解决方案会使父块对象中的更改难以立即反映在DOM h1节点中.相反，我会做这样的事情:

<div ng-app="app" ng-controller="EditorCtrl">
   <h1 editable="blocks.header">text1 should be displayed here</h1>
   <h1 editable="blocks.body">text2 should be displayed here</h1>
</div>

和JS:

angular.module('app', []).controller('EditorCtrl', function($scope) {
  $scope.blocks = {
    header: 'text1',
    body: 'text2',  
  };


}).directive('editable', function() {
  return {
    template: 'data: {{text}}',
    scope: {
        'text': '=editable'   
    },
    link: function(scope, element, attrs) {
        element.wrap('<div class="editable"></div>');
    }
  }
});

使用'text':'= editable'范围声明，您将在本地范围文本变量和父级"blocks.header/body"(可编辑DOM属性的内容)之间建立双向绑定.块变量中的任何更改都将自动反映在DOM中.

I have a directive which needs to display data from an object in a controller. The piece of data that must be displayed is determined by an attribute of the directive and some other calculations based on other dom elements.

Here is a simplified example.

I have this data:

app.controller('EditorCtrl', function($scope) {
    $scope.blocks = {
        header: 'text1',
        body: 'text2',  
    };
});

And I want it to be displayed with this directive:

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            val = data;
        }
    }
});

And in HTML:

<h1 editable="header">text1 should be displayed here</h1>
<h1 editable="body">text2 should be displayed here</h1>

How can I accomplish this ? Am I approaching the problem in a right way ?

解决方案

The 'data: {{val}}' instruction in the directive is expecting "val" to be defined in the scope (and it isnt).

You can create a local scope with "scope:true" to hold the val variable. (see http://docs.angularjs.org/guide/directive scope section).

Something like this would work:

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        scope: true,
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            scope.val = data;
        }
    }
});

In AngularJS, a child scope prototypically inherits from its parent scope, so even though you are creating a new scope, you can still access the blocks object.

Having said that, the previous solution would make it hard for changes in the parent blocks object to be instantly reflected in the DOM h1 nodes. I would instead, do something like this:

<div ng-app="app" ng-controller="EditorCtrl">
   <h1 editable="blocks.header">text1 should be displayed here</h1>
   <h1 editable="blocks.body">text2 should be displayed here</h1>
</div>

And JS:

angular.module('app', []).controller('EditorCtrl', function($scope) {
  $scope.blocks = {
    header: 'text1',
    body: 'text2',  
  };


}).directive('editable', function() {
  return {
    template: 'data: {{text}}',
    scope: {
        'text': '=editable'   
    },
    link: function(scope, element, attrs) {
        element.wrap('<div class="editable"></div>');
    }
  }
});

With the 'text': '=editable' scope declaration you are setting up a bi-directional binding between the local scope text variable and parent "blocks.header/body" (the content of the editable DOM attribute). Any change in blocks variable will be automatically reflected in the DOM.

这篇关于如何在angularjs中动态绑定指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！