Question

我有一个显示输入字段的指令，我想用服务器中的数据初始化这些字段。问题是我在使用ng-model时无法做到这一点。在使用我在控制器中使用的指令之前，比如$ scope.field1 = $ scope.first.field1

这是我的代码。我为了便于阅读而简化了它，但这个想法就在这里。

在我的控制器中，我有这段代码：

app.controller('MyController',
    ['$scope', 'myData', function($scope, myData) {
        myData.then(function(data) {
            $scope.first = data.first;
            $scope.second = data.second;
        });
}]);

在第一个和第二个内部我有2个字段：field1和field2。

在html代码中，我有这个：

<h1>First</h1>
<my-directive info="first"></my-directive>
<h1>Second</h1>
<my-directive info="second"></my-directive>

该指令如下：

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        templateUrl: 'static/js/myDirective.html',
        link: function(scope, element, attrs) {
            scope.doStuff = function() {
                /* Do stuff with 
                scope.field1 and scope.field2 */
            }
        }
    };
});

和myDirective.html代码：

<input type="text" ng-model="myfield1" />
<input type="text" ng-model="myfield2" />
<input type="submit" ng-click="doStuff()" />

如果在myDirective.html中我写道：

<input type="text" value="info.field1" />

我可以看到价值很好。

有什么想法吗？

Answer 1

检查工作演示：JSFiddle。

为指令定义一个控制器并在其中进行初始化：

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        controller: ['$scope', 'myData', function ($scope, myData) {
           myData.then(function(data){
               $scope.first = data.first;
               $scope.second = data.second;
           });
        }],
        ...
    },

Answer 2

可能你的指令在数据加载之前初始化。并且您的指令将ng-model视为未定义的变量。您没有直接在模板中使用信息，因此没有自动$ watch for s :)。

你需要在指令中观察你的信息变量，并在变化时调用你的doStuff函数。

注意：我不建议将控制器添加到指令中，仅用于此任务。当您需要与其他指令通信时，需要向指令添加控制器。不等待异步数据

修改

你应该做

app.directive('myDirective', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'static/js/myDirective.html',
    link: function(scope, element, attrs) {
        scope.doStuff = function() {
            /* Do stuff with 
            scope.field1 and scope.field2 */
        }
        scope.$watch('info', function(newValue){
            scope.doStuff();
        });
    }
};
});

Answer 3

在指令中，myfield1和myfield2不存在。您可以使用info.field1来解决问题。

var myApp = angular.module('myApp', []);

//Faking myData here; in your example this would come from the server
var myData = {
    first: {
        field1: "FirstField1",
        field2: "FirstField2"
    },
    second: {
        field1: "SecondField1",
        field2: "SecondField2"
    }
};
		
myApp.controller('MyController', ['$scope', function($scope) {
    $scope.first = myData.first;
    $scope.second = myData.second;
}]);

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        template: '<input type="text" ng-model="info.field1" /><input type="text" ng-model="info.field2" /><input type="submit" ng-click="doStuff()" />',
        link: function(scope, element, attrs) {
            scope.doStuff = function() {
                alert('Info: ' + scope.info.field1 + ', ' + scope.info.field2);
            }
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">
    <h1>First</h1>
    <my-directive info="first"></my-directive>
    <h1>Second</h1>
    <my-directive info="second"></my-directive>
</div>

初始化angular指令中的文本输入字段

3 个答案: