解析包含$ parse的点字符的字段名称

时间:2015-02-22 12:24:05

标签: javascript angularjs

考虑我的对象有一个包含点字符的字段,我想用$parse解析它,

例如,以下代码记录undefined -

 var getter = $parse('IhaveDot.here');
 var context = {"IhaveDot.here":'The point value'};
 scope.name = getter(context);
 console.log(scope.name); // logs 'undefined'

如何记录字段值 - 例如The point value

var myAppModule = angular.module('myAppModule', []).
		directive('n',function($parse){
			return {
				restrict: 'E', 
				link: function(scope,element,attrs) {
					var getter = $parse('IhaveDot.here');
					var context = {"IhaveDot.here":'The point value'};
					scope.name = getter(context);
					console.log(scope.name);
				}
			}
		});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<n></n>

2 个答案:

答案 0 :(得分:2)

您似乎可以通过this(未记录的功能)引用上下文。所以最简单的方法是:

var getter = $parse("this['IhaveDot.here']");
var context = {"IhaveDot.here":'The point value'};
console.log(getter(context));  // => The point value

检查the plunker

答案 1 :(得分:1)

服务 $ parse 适用于点,因此以常规方式您必须以这种方式定义上下文:

var getter = $parse('user.name');
var context = {user:{name:'angular'}};

console.log(getter(context)); //  angular

覆盖角度的提升服务的另一种可能性。像这样:

<强> 1.Version

var myParseapp = angular.module('parsemodule', [])

myParseapp.factory('$myparse', function($parse) {

    var body = angular.element(document.body);
    var parse = {};

    parse.parse = function (context, exp) {

        var parts = exp.split('.');
        var obj = context;

        for(var p=0;p < parts.length;p++){
            var getter = $parse(parts[p]);
            obj = getter(obj);
        }

        return obj;
    };

    return parse;

});

将您的模块包含在实际的app-module中:

var testApp = angular.module('testApp', ['parsemodule']);

testApp.controller('testController', function($scope, $myparse) {

    var context = {name:'jack'};
    var exp = 'name';

    console.log($myparse.parse(context,exp)); // jack

    var context = {user:{name:'angular'}};
    var exp = 'user.name';

    console.log($myparse.parse(context,exp)); // angular

    context = {user:{name:{job:'programmer'}}};
    exp = 'user.name.job';

    console.log($myparse.parse(context,exp)); // programmer

});

<强> 2.Version

以下是符合您要求的版本:

var myParseapp = angular.module('parsemodule', [])

myParseapp.factory('$myparse', function($parse) {

    var body = angular.element(document.body);
    var parse = {};

    parse.parse = function (context, exp) {

        context = JSON.parse(JSON.stringify(context)); // deep copy

        var oldPropName = Object.keys(context)[0];

        if(oldPropName.indexOf('.') != -1) {

            context[oldPropName.replace(/[.]/g, '_')] = context[oldPropName];

            delete context[oldPropName];

        }

        var obj = context;
        var getter = $parse(exp.replace(/[.]/g,'_'));
        obj = getter(obj);

        return obj;
    };

    return parse;

});

然后将其添加到您的实际应用中:

var testApp = angular.module('testApp', ['parsemodule']);

testApp.controller('testController', function($scope, $myparse) {

    var context = {name:'jack'};
    var exp = 'name';

    console.log($myparse.parse(context,exp)); // jack

    var context = {'user.name':'angular'};
    var exp = 'user.name';

    console.log($myparse.parse(context,exp)); // angular

    context = {'user.name.job':'programmer'};
    exp = 'user.name.job';

    console.log($myparse.parse(context,exp)); // programmer

    exp = 'IhaveDot.here';
    context = {"IhaveDot.here":'The point value'};

    console.log($myparse.parse(context,exp)); // The point value

});