Question

如果我有控制器：

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"

Answer 1

是的，您可以传入整个对象。但是在指令中你必须填充对象的所有属性。例如：

HTML：

error

在你的指令中：

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

我可能不会这样做，但这就是我要做的事情

Answer 2

好的，我找到了两种方法来解决这个问题：

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
        })
    }
});

还有其他想法吗？

如何解析＆＃39; $传递整个对象的指令中的作用域对象

2 个答案: