用角NG-模型的指令模板前pression [英] Angular using ng-model with expression in directive template

问题描述

我想使用的NG-模型属性的自定义元素。问题是，我需要设置NG模型和前pression：

  NG-模式={{anyVariable}}
 

问题是，我始终是一我添加了前pression到NG-model属性在我的模板，得到一个错误：

 错误：语法错误：令牌'x.name是一个意外，希望[：]的前pression第3栏[{{x.name}}]启动在[x.name}}]。
    在错误（小于匿名＆GT;）
    在throwError（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：5999：11）
    在消费（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6037：7）
    在对象（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6327：9）
    小学（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6211：17）
    在一元（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6198：14）
    在乘（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6181：16）
    在添加剂（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6172：16）
    在关系（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6163：16）
    在平等的（HTTP：//本地主机：9000 /公/ Java脚本/ angular.js：6154：16）
 

所使用的code：

 函数addFormFieldDirective（的ElementName，模板）{
    app.directive（的ElementName，函数（）{
        返回{
            限制：E，
            范围： {}，
            更换：真实，
                              //添加一些额外的布局
            模板：buildFormTemplate（模板），
            链接：功能（范围，榆树，ATTRS）{
                scope.x = ATTRS;
            }
         };
    }）;
}
addFormFieldDirective（文本框，'＆LT;输入ID ={{x.id}}NG模型={{x.name}}类型=文本名称={{x.name}}值={{x.value}}/＆GT;'）;
 

解决方案

我无法找到一个方法来传递一个前pression到 NG-模型中该指令的模板。

以下解决方案创建的指令和指导控制器动态创建的主控制器模型对象的属性名称中的一个孤立的模型，手表孤立的模型，通过更新主要型号：

  app.directive（文本框功能（）{
    返回{
        限制：E，
        范围： {}，
        更换：真实，
        控制器：函数（$范围，$ ATTRS）{
            $ scope.x = $ ATTRS;            $范围。$腕表（'directiveModel'，函数（）{
                $ $范围parent.myModel [$ attrs.name] = $ scope.directiveModel。
            }）;            $ scope.directiveModel = $ attrs.value;
        }，
        模板：buildFormTemplate（'＆LT;输入NG模型=directiveModelID ={{x.id}}类型=文本名称={{x.name}}VALUE ={{x.value }}/＆GT;'）;    };
}）;
 

Plunkr演示

I want to use the ng-model attribute in a custom element. The problem is, that I need to set the ng-model with an expression:

ng-model="{{anyVariable}}"

The problem is, that I always get an error as soon I add the expression to the ng-model attribute in my template:

Error: Syntax Error: Token 'x.name' is unexpected, expecting [:] at column 3 of the expression [{{x.name}}] starting at [x.name}}].
    at Error (<anonymous>)
    at throwError (http://localhost:9000/public/javascripts/angular.js:5999:11)
    at consume (http://localhost:9000/public/javascripts/angular.js:6037:7)
    at object (http://localhost:9000/public/javascripts/angular.js:6327:9)
    at primary (http://localhost:9000/public/javascripts/angular.js:6211:17)
    at unary (http://localhost:9000/public/javascripts/angular.js:6198:14)
    at multiplicative (http://localhost:9000/public/javascripts/angular.js:6181:16)
    at additive (http://localhost:9000/public/javascripts/angular.js:6172:16)
    at relational (http://localhost:9000/public/javascripts/angular.js:6163:16)
    at equality (http://localhost:9000/public/javascripts/angular.js:6154:16) 

The code used:

function addFormFieldDirective(elementName, template) {
    app.directive(elementName, function() {
        return {
            restrict: "E",
            scope: {},
            replace: true,
                              // adds some extra layout
            template: buildFormTemplate(template),
            link: function(scope, elm, attrs) {
                scope.x = attrs;
            }
         };
    });
}
addFormFieldDirective("textfield", '<input id="{{x.id}}" ng-model="{{x.name}}" type="text" name="{{x.name}}" value="{{x.value}}" />');

解决方案

I couldn't find a way to pass an expression to ng-model within the directive template.

Following solution creates an isolated model within the directive and directive controller dynamically creates the property name in main controller model object and watches the isolated model to pass updates to main model:

app.directive("textfield", function() {
    return {
        restrict: "E",
        scope: {},
        replace: true,
        controller:function($scope,$attrs)  {
            $scope.x=$attrs;

            $scope.$watch('directiveModel',function(){
                $scope.$parent.myModel[$attrs.name]=$scope.directiveModel;
            }) ;

            $scope.directiveModel=$attrs.value;
        },
        template: buildFormTemplate('<input ng-model="directiveModel" id="{{x.id}}" type="text" name="{{x.name}}" value="{{x.value}}" />');

    };
});

Plunkr Demo

这篇关于用角NG-模型的指令模板前pression的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！