Question

我对AngularJS指令相当新，并想知道如何实现传递一个自定义字符串，这是一个包含控制器变量的URL，稍后将由该控制器使用？

致电指令

<div ng-controller="MyController">
    <my-custom-form after-submit="group/{{insertedId}}" />
</div>

指令

app.directive('myCustomForm', function() {
    return {
        templateUrl: 'myCustomForm.html',
        link: function(scope, element, attr) {
            scope.loadUrl = attr.afterSubmit;
        }
    }
});

控制器

app.controller('MyController', function($scope, $location, $http) {
    $scope.loadUrl = '';
    $scope.insertedId = NULL;
    $http({
        method:'POST',
        url:'edit.php',   
        data:formData
    }).success(function(response) {
        $scope.insertedId = response.dbInsertedPrimaryId; // used in "after-submit"
        $location.path($scope.loadUrl); 
    });
});

所以当$ location.path（）调用它时，我会将我发送到一个网址，例如：

http://example.com/group/22

这样做的原因是我每次使用该指令时都可以传递一个特定/不同的URL，如此

<div ng-controller="MyController">
    <my-custom-form after-submit="user/{{insertedId}}" />
    <my-custom-form after-submit="home/{{insertedId}}/something" />
    <my-custom-form after-submit="{{insertedId}}/anything" />
</div>

或许有更好的方法可以做到这一点？我不知道这就是我要问的原因。感谢。

Answer 1

试试这个

app.directive('myCustomForm', function() {
    return {
        scope: {
          afterSubmit = '@',
        },
        templateUrl: 'myCustomForm.html',
        controller: function($scope) {
            console.log($scope.afterSubmit);
        }
    }
});

请注意，范围变量名称是camelCase（stackOverflow），而是属性为dash-case（堆栈溢出）这是因为HTML无法理解camelCase和javascript无法理解破折号

变量的@代表字符串。您可以使用：

@ for strings
=来自控制器的变量（例如：after-submit =＆＃34; ctrl.submitUrl＆＃34;）
＆安培;回调（例如：on-submit =＆＃34; ctrl.submit（）＆＃34;）

您应该使用控制器：而不是链接：...原因如下：AngularJS : link vs compile vs controller

AngularJS将字符串中的范围变量传递给指令

1 个答案: