javascript - 如何 '$parse' 指令中的作用域对象传递整个对象

标签 javascript angularjs parsing

如果我有这个 Controller :

myApp.controller('ctrl', function ($scope) {    
 $scope.obj = {
  name: "John",
  lastname: "Preston"
 }
});

使用这个html

<body ng-controller="ctrl">
    <div my-attr="obj" my-directive>Click here</div>
    <pre>{{obj | json}}</pre>
</body>

我想使用 $parse 更改指令lastname的值。我知道如果我像这样传递对象属性:

<div my-attr="obj.lastname" my-directive>Click here</div>

该指令的作用是:

myApp.directive('myDirective', function( $parse, $log ) {
    return function( scope, el, attrs ) {

        var model = $parse( attrs.myAttr );

        $log.log( model(scope) );

        el.bind('click', function() {
            model.assign(scope, "Watts");
            scope.$apply();
            $log.log( model(scope) ); // Now here obj.lastname is Watts
        })
    }
});

但是指令中的代码怎么可能不传递属性呢?我的意思是,像这样: my-attr="obj"

最佳答案

好吧,我找到了两种方法来实现这个:

1) $parse(我最喜欢的)

我刚刚使用: $parse( 'obj.lastname' ); 来获取它:

html:

<div my-directive>Click here</div>

指令:

myApp.directive('myDirective', function( $parse, $log ) {
    return function( scope, el, attrs ) {

        var model = $parse( 'obj.lastname' );

        $log.log( model(scope) );

        el.bind('click', function() {
            model.assign(scope, "Watts");
            scope.$apply();
            $log.log( model(scope) ); // Now here obj.lastname is Watts
        })
    }
});

2) $eval(有趣)

html:

<div my-attr="obj" my-directive>Click here</div>

指令:

myApp.directive('myDirective', function( $parse, $log ) {
    return function( scope, el, attrs ) {

        var model = scope.$eval(attrs.myAttr);

        $log.log( model );

        el.bind('click', function() {
            model.lastname = 'Watts';
            scope.$apply();
            $log.log( model ); // Now here obj.lastname is Watts
        })
    }
});

还有其他想法吗?

关于javascript - 如何 '$parse' 指令中的作用域对象传递整个对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34912091/

相关文章:

parsing - 秒差距位置作为偏移量

PHP-Dom 处理 : Code-review of a little Parser-programme

javascript - 使用 javascript 将 SVG 保存为 PNG 未知 DOM 异常

javascript - 如何通过单击外部来关闭 div

angularjs - 将内容添加到 Angular 指令中的嵌入内容

javascript - AngularJS $http.get 结果到数组

css - Jasmine 测试 css 选择器的存在

javascript - 如何在 svg 交互式 map 上设置城市边界?

javascript - 如何修复导航栏位置?

python - python中读取的csv格式错误