Question

我正在使用Angular JS 1.2.25更新和修改项目。

我的控制器中有一个名为vm.stageValue的值，然后在ng-if的模板中调用，所以当vm.stageValue递增时，它会显示不同的容器。但是，当我在vm对象上定义一个我想要在模板上插值的值时，例如一个将被使用但不会在模板上更改的字符串，我似乎无法显示它。

这让我觉得我没有使用vm方法正确设置我的控制器。

我可以使用ng-if并使用模板上的ng-click从控制器调用函数，但我无法插入字符串或将其发送到另一个子组件，这似乎很奇怪

代码在下面，谢谢你提前。任何帮助都将非常感激

控制器

angular
    .module('formModule')
    .controller('NewBusinessFormCtrl', [
        function() {
            let vm = this;

            // Methods used in controller
            vm.methods = {
                incrementStageValue: incrementStageValue,
                decrementStageValue: decrementStageValue,
                canIncrement: canIncrement,
                canDecrement: canDecrement
            };

            //Initial stage values
            vm.stageValue = 1;
            vm.maxStageValue = 7;
            // This is the string that I want to interpolate below
            vm.contactFormCategory = 'New Business'; 
        }
    ]);

控制器模板

<div class="new_busines_cf" ng-controller="NewBusinessFormCtrl as vm">
<div class="form_wrapper">
    <div ng-if="vm.stageValue == 1">
        <input-text
            class="form_input"
            ng-model="ngModel"
            input-text-label="This is the label">
        </input-text>

        // I want to send the vm.contactFormCategory into the component  
        // Value is sending but the component display 'vm.contactFormCategory'
        // Not the value set in the controller
        <form-headline
            form-headline-sup-title="vm.contactFormCategory"
            form-headline-text="This is a form headline text">
        </form-headline>
    </div>

    // Trying to interpolate value here into template, but nothing display
    {{vm.contactFormCategory}}

    <div ng-if="vm.stageValue == 2">
        <input-text
            class="form_input"
            ng-model="ngModel"
            input-text-label="This is the label of stage 2">
        </input-text>

        <form-headline
            form-headline-sup-title="vm.contactFormCategory"
            form-headline-text="This is a form headline text">
        </form-headline>
    </div>

    <button ng-click="vm.methods.incrementStageValue()">Increment Value</button>
    <button ng-click="vm.methods.decrementStageValue()">decrement Value</button>
</div> 
</div>

**表格标题**

angular
    .module('formModule')
    .directive('formHeadline', function() {
        return {
            restrict: 'E',
            templateUrl: '/partials/form/form-headline.component.html',
            scope: {
                formHeadlineText: '@',
                formHeadlineSupTitle: '@'
            },
            link: function () {

            }
        };
    });

Answer 1

将 ng-if 更改为

  <div ng-if="vm.stageValue === '2'">

无法在模板中插入vm.value - AngularJS

1 个答案: