如何从angularjs中的组件标签访问组件模板中的对象或变量

时间:2018-09-24 13:08:26

标签: javascript angularjs data-binding components

我有一个组件,该组件必须根据通过HTML中的component标签传递的值来呈现模板。这是我的代码 这是我的sample.js

 (function (angular) {
    "use strict";
    var mod = angular.module("MyModule", []);
    mod.controller("controller", function ($scope) {
        $scope.somevalue=2;
    })
    mod.component("mycomponent", {
        template: function ($attrs) {
            switch ($attrs.tempdata) {
                case 1:
                    return ["<h1>1st page</h1>"];
                case 2:
                    return ["<h1>2nd page</h1>"];
                case 3:
                    return ["{{$ctrl.tempdata}}"]
            }
        },
        bindings: {
            tempdata: '='
        }
    });
})(window.angular);

这是我的HTML代码

<!DOCTYPE html>
<html>
<head>
    <script src="Scripts/angular.js"></script>
    <script src="sample.js"></script>
</head>
<body ng-app="MyModule" ng-controller="controller">
    <mycomponent tempdata=somevalue></mycomponent>
</body>
</html>

现在,我需要获取tempdata的值,该值将传递到开关中的组件中。我使用$ attrs.tempdata,因为它将以字符串形式获取tempdata的值,这意味着($ attrs.tempdata =“ somevalue”)。当它被硬编码为例如2时,则$ attrs.tempdata =“ 2”但我不需要它作为字符串。 给我建议一个可能的解决方案。

0 个答案:

没有答案