javascript - 在 Angularjs 中访问模板内的属性值

Question

我创建了一个指令并将属性作为字符串的对象(名称/值对)传递。但是，如果我尝试访问模板内的属性值，则不会对其进行评估。属性如下传递

<testcomponent  myInfo="{firstname:'green',lastname:'Woods'}"></testcompone>

模板定义如下

   template: '<div>This will not run fine..! </div>'+
        '<div> This first name is: {{myInfo.firstname}} </div>',

我创建了一个如下所示的隔离范围

  scope: {
       info: '=myInfo',
    },

jsfiddle 是@ https://jsfiddle.net/visibleinvisibly/be4ww6vu/

需要评估变量({{myInfo.firstname}})，但它没有发生。我正在寻找一个不需要创建 Controller 的解决方案(我也错了)

提前致谢，杰森

Answer 1

有一些问题(如下所述)和一些使用 Angular 的技巧。

Here's a working fiddle

1. Angular 区分大小写，并且对属性名称“特别”。如果您希望您的属性在指令中为 myInfo，则需要在标记中将其设置为 my-info。 Angular 会自动将标记中的 my-info 中的名称调整为指令中的 myInfo。
2. 您的标记(您尝试输出名称的地方)引用了 myInfo，但是您的范围声明将其分配给了范围变量 info。为了输出名称，您需要将其更改为 {{info.firstname}}。

修改代码如下，附注释:

<div ng-app="testApp" >
  <!-- Issue #2: If you want camel-case "myInfo", angular expects the attribute to be "my-info". -->
  <test-component   
  my-info="{firstname: 'green',lastname: 'Woods'}"/>
</div>  

指令:

var module = angular.module('testApp', [])
    .directive('testComponent', function () {
    return {
        restrict: 'E',
        // Issue #1: The template referenced 'myInfo', but your scope was assigning that to 'info'.
        template: '<div>This will not run fine..! </div>'+
        '<div> This first name is: {{info.firstname}} </div>',
        scope: {
           /* Hints: 
                = is two way-binding "deep" watch.  
                =* is "shallow" watch, and on this simple object, that is all you need.  
                @ is text-binding (for reference)
           */
           info: '=*myInfo',
        },
        controller: function($scope) {
        },
        link: function (scope, element, attrs) {
        }
    };
});

最后 - 通常(根据我的经验)你不会直接在标记中设置属性的值，而是你会从你的 Controller 中引用一个 $scope 变量，并在你的 Controller 。